光滑滑块"位置:固定"

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
    });
});

这是一个显示问题的小提琴

Answer 1

问题:当.cappa__holder有position:fixed;和没有高度时,浮油无法计算幻灯片的大小.但是,您只需要给出宽度.cappa__holder来解决您的问题(例如width:100%).

的jsfiddle