Slick滑块“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
    });
});

这里有一个示例展示问题

- StudioTime

Answer 1

问题：当.cappa__holder设置为position:fixed;并且没有高度时，slick无法计算幻灯片的大小。但是您只需要给.cappa__holder指定宽度即可解决问题（例如width:100%）。 Jsfiddle

- Alex