Question

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

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

控制面板宽度的coda-slider 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使用原始固定宽度作为滑动距离，所以一旦你开始滑动每个面板结束向上偏移，随着每张幻灯片的增加而增加。

有关使滑动距离随宽度变化的任何建议吗？

确定排序......

必须修改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'（基于像素的滑块）配置coda幻灯片放映到我的流体布局网站时遇到了类似的问题。

通过将coda滑块值更改为％，然后使用额外的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类'相等'是这个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的改编。

这意味着无论浏览器宽度如何，滑块布局都会在页面加载时完全按照我的要求呈现，并与网格布局保持一致。

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

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

2 个答案: