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;并且没有高度时，浮油无法计算幻灯片的大小。但是，您只需要为.cappa__holder指定宽度即可解决问题（例如width:100%）。

Jsfiddle

光滑滑块“位置：固定”

1 个答案: