0

我一直在研究在具有流畅布局的网页中使用 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 窗口的大小，但不会重置幻灯片值。从长远来看，调整浏览器窗口的大小并不是什么大要求，但是当人们在查看网站时改变平板电脑的方向时，它会派上用场。

4

2 回答 2

2

这是旧的，但是，我遇到了同样的问题，结果开发人员制作了一个新的 coda-slider，可以动态调整宽度。

它在这里：LiquidSlider

于 2012-09-03T00:20:38.823 回答
0

我在尝试使用Flowplayer 工具“可滚动”（基于像素的滑块）配置结尾幻灯片时遇到了类似的问题。

我通过将 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 类 '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的改编。

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

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

于 2011-07-14T13:50:03.327 回答