在流体布局上自动调整尾部滑块的固定宽度

Question

我一直在研究在一个布局流畅的网页中使用coda-slider。挑战是尾部滑块似乎想要一个固定的宽度。尝试使用百分比会导致副本在面板边缘后面消失。

我找到了一个示例javascript，它是根据容器的实际宽度选择jpg的，并尝试修改它以更改滑块面板的css宽度值，但没有成功。……好的，我得到了它的工作现在宽度。

控制面板宽度的尾部滑块css的一部分：

.coda-slider, .coda-slider .panel { width: 650px; }

我找到并修改的脚本：

 $(document).ready(function() { 

 function imageresize() {  
   var availwidth = $("#leftside").width(); 
   var codawidth = availwidth - 50; 
      $(".coda-slider .panel").css({"width": codawidth + "px"});
      $(".coda-slider").css({"width":codawidth + "px"});
}    

imageresize(); //Triggers when document first loads      

$(window).bind("resize", function(){ //Adjusts image when browser resized
    imageresize();  
 });  
 }); 

我通过使用容器大小而不是页面大小解决了大小问题……但是..。尾部滑块使用原始的固定宽度作为滑动距离，因此一旦开始滑动，每个面板都会产生偏移量，而偏移量会随着每次滑动而增加。

对于让滑动距离随宽度变化有什么建议吗？

好的，把它整理好……

我不得不修改coda-slider js文件，替换为：

var panelWidth = slider.find(".panel").width();

使用与css面板宽度相同的公式：

var panelWidth = $("#leftside").width() - 50;

解决了滑行距离的问题。

现在我只需要弄清楚如何让coda-slider在浏览器窗口调整大小时重置。它会调整css窗口的大小，但不会重置滑动值。从长远来看，调整浏览器窗口的大小并不是一个很大的要求，但当人们在浏览网站时改变平板电脑的方向时，它会派上用场。

Answer 1

这是旧的，但是，我有同样的问题，结果是开发人员制作了一个新的尾部滑块，可以动态调整宽度。

点击这里：LiquidSlider

Answer 2

当我试图使用Flowplayer Tools 'scrollable' -一个基于像素的滑块-在我的fluid布局站点中配置一个尾部幻灯片时，我也遇到了类似的问题。

我已经解决了这个问题，方法是将尾部滑块的值更改为%，然后使用额外的jQuery行来强制滑块的项目面板保持与滑块容器相同的宽度。

下面是我使用-%代替像素作为宽度的设置。我没有在滑块面板上设置任何宽度；而是通过jQuery为它们赋值：

<style type="text/css">

    .slider  { width:100%; height:200px; overflow:hidden; position:relative }
    .items   { width:2000em; position:absolute }
    .item    { /* do not set any width */ height:200px; overflow:hidden;
             float:left; display:inline-block }

</style>


<div class="slider equal">
    <div class="items">

        <div class="item equal"></div>
        <div class="item equal"></div>
        <div class="item equal"></div>

    </div>
</div>

CSS类'equal‘是这个jQuery的目标：

// Set slider children to width of parent

if($("div.equal").length){
    $.fn.setAllToMaxWidth = function(){
        return this.width( Math.min.apply(this, $.map( this , function(e){ return $(e).width() }) ) );
    };

    $("div.equal").setAllToMaxWidth();
};

此jQuery变通方法是Jaina Ewen对jQuery Equal Column Heights的改编。

这意味着滑块布局完全按照我想要的那样呈现在页面加载中，并与我的网格布局保持一致，而不考虑浏览器的宽度。

但是有一个小问题--如果你在浏览器窗口加载后调整它的大小，你的布局可能会超出滑块项目的宽度，看起来有点奇怪。