I'm using slick.js and trying to position the slider at the bottom of the page.

I'm using position:fixed but it simply breaks the slider, meaning every movement causes each cell to grow, double in size I think.

Is there a workaround for this?

Here's my code:

<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 {
    /* unment 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

I'm using slick.js and trying to position the slider at the bottom of the page.

I'm using position:fixed but it simply breaks the slider, meaning every movement causes each cell to grow, double in size I think.

Is there a workaround for this?

Here's my code:

<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 {
    /* unment 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

• javascript
• jquery
• css
• slick.js

1 Answer 1

Problem: when .cappa__holder has position:fixed; and does not have height, the slick can not calculate the size of slides. However, you only need to give width to the .cappa__holder to solve your problem(for example width:100%).

Jsfiddle