javascript - 光滑的 slider "position: fixed"

Question

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

我正在使用 position:fixed 但它只是破坏了 slider ，这意味着每次移动都会导致每个单元格增长，我认为尺寸会加倍。

有解决办法吗？

这是我的代码:

<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