Jquery 自动调整尾波滑块'；s流体布局上的固定宽度

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

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

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

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

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

我找到并修改的脚本：

 $(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使用原始的固定宽度作为滑动距离，因此一旦开始滑动，每个面板都会以偏移结束，偏移量会随着每次滑动而增加

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

好的，整理一下

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

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

css面板宽度的公式相同：

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

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

这就考虑了滑动距离

---

现在我只需要弄清楚如何在调整浏览器窗口大小时重置尾波滑块。它调整css窗口的大小，但不重置幻灯片值。从长远来看，调整浏览器窗口的大小不是一个很大的要求，但如果人们在浏览网站时更改平板电脑的方向，这会很方便。

我在尝试使用基于像素的滑块将尾波幻灯片配置到我的fluid layout站点时遇到类似问题

我通过将尾码滑块值更改为%，然后使用额外的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>

这个jQuery变通方法是Jaina Ewen对的一个改编

这意味着滑块布局在pageload上完全按照我希望的方式呈现，并与我的网格布局保持一致，而与浏览器宽度无关

---

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

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

在这里：