光滑的滑块 "position: fixed"

Question

我正在使用 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
    });
});

Here's a fiddle to show the problem

Answer 1

问题：当.cappa__holder有position:fixed;而没有高度时，slick无法计算幻灯片的大小。然而，你只需要给 .cappa__holder 宽度来解决你的问题（例如 width:100%）。

Jsfiddle

光滑的滑块 "position: fixed"

Slick slider "position: fixed"

javascript

jquery

css

slick.js