滑动滑块”;位置:固定”;

Slick slider "position: fixed"

本文关键字：固定 位置      更新时间：2023-09-26

我正在使用slick.js并尝试将滑块定位在页面底部。

我使用的是position:fixed，但它只是打断了滑块，这意味着每一个移动都会导致每个细胞生长，我认为大小会翻倍。

有解决办法吗？

这是我的代码：

<div class="cappa__holder">
    <div class="cappa">111</div>
    <div class="cappa">222</div>
    <div class="cappa">333</div>
    <div class="cappa">444</div>
    <div class="cappa">555</div>
    <div class="cappa">666</div>
    <div class="cappa">777</div>
</div>
.cappa__holder {
    /* uncomment next line to see it break */
    //position: fixed; 
    bottom: 0;
}
.cappa {
    text-align: center;
    background:#f1f1f1;
    margin: 4px;
    border: 1px solid blue;
}
$(document).ready(function(){
    $('.cappa__holder').slick({
      infinite: true,
      arrows: true,
      slidesToShow: 4,
      slidesToScroll: 4,
      speed: 600
    });
});

这里有一个小提琴来展示问题

问题：当.cappa__holder具有position:fixed;且没有高度时，滑面无法计算幻灯片的大小。但是，您只需要给.cappa__holder宽度就可以解决您的问题（例如width:100%）。

Jsfddle

相关文章：