在流体布局上自动调整 coda-slider 的固定宽度

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

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

在这里：LiquidSlider

Answer 2

我在尝试使用 Flowplayer Tools“可滚动”（基于像素的滑块）将尾声幻灯片配置到我的流体布局网站时遇到了类似的问题。

我通过将 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 等列高度。

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

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

Answer 3

谢谢，现在是 2024 年，我有 bootstrap4 设计的 codalider。 我以为我有一些不错的东西，但当我检查三星手机 S23 和 S24 上的页面时，它看起来像所描述的问题。 我会尝试做这里提到的事情。我不喜欢液体滑块，首先我想，是的，这就是它，但遇到了问题，因为文档非常差，必须自己发现大多数东西......一些文档会很好。