Slick slider gets wrong width

Question

My slick slider gets wrong width when initialized and when I change screen resolutions.

My js:

$('.slider').slick({
    infinite: false,
    speed: 300,
    initialSlide: 1,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 650,
        settings: {
            initialSlide: 2,
            slidesToShow: 1
        }
    }]
});

My css:

.sub-slider {
    width: 100%;
    display: flex; 
    flex-flow: column;

    .slider {
        display: flex;   
        flex-flow: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        min-width:500px;

        .sub-box {
            text-align: center;
            padding-top: 45px;
            cursor:pointer;

            .title {
                color: #6deca0;
                font-family: "AmsiProNarw", sans-serif;
                font-size: 48px;
                font-style: italic;
                font-weight: 800;
            }
            .price {
                color: #393939;
                font-family: "AmsiProNarw", sans-serif;
                font-size: 18px;
                font-style: italic;
                font-weight: 800;
            }
            .sub-slider-btn {
                margin: 60px 20px;
                border-color: #eaeaea!important;
                background-color: #fdfdfd!important;
                color: #686868!important;
            }
        }

        .sub-box:hover { 
            transition: border .2s;            
            border-bottom: 14px solid #6deca0;
            .sub-slider-btn{
                border-color: #6deca0!important;
                background-color: rgba(108,235,159,.2)!important;
                color: #393939!important;
            }
        }
    }

    .sub-slider-confirmation-btn-wrp { 
        align-self: center;
        display: none;
        .sub-slider-confirmation-btn {
            cursor:pointer;
            $margin: 20px;
            $height: 45px;
            height: $height;
            width: 80px;
            border: 1px solid #ccc;
            border-radius: 8px;
            margin: $margin $margin $margin $margin;
            text-align: center;
            line-height: $height;  
            font-weight: 800;
        }
    }

}

This is how it is loaded, even though I have specified slidesToShow: 3.

Then when I change to resposive it looks like this:

I am not sure how to fix this. I have read through these, with no fix:

Slick slider wrong width on initialization

Slick carousel loads the wrong width on initialization

https://github.com/kenwheeler/slick/issues/790

https://github.com/kenwheeler/slick/issues/1180

https://github.com/kenwheeler/slick/issues/2167

edit:

I made a fiddle https://jsfiddle.net/simeydotme/fmo50w7n/

It seems to work in the fiddle, but not on my site. Maybe I inherit some bad css? But I've been trying to debug this for 5h now. And I cant find any solution..

_“My css: ...”_ - slick comes with its own styesheet that applies the basic styling needed for it to work. Now when I see you overwriting properties for basic classes the slider uses, then I would first of all question if you have not messed this up yourself by adding those. — CBroe, Aug 17 '17 at 12:49
There are some defined sizes for its `css` to work. If you are just resizing the browser with browser maximize button or resize tool, then it might not work as expected until the defined points are reached. I would suggest you to use the emulator to check the responsiveness or use a real time device to verify the same.. — Guruprasad J Rao, Aug 17 '17 at 13:04

score 35 · Answer 1 · edited Nov 04 '19 at 06:57

35

I also encountered the same issue - slider track width too large upwards of 30,000px wide. After reading Spencer Rysman's answer, I reviewed my markup and realized that I had applied a row class to the div wrapping my slider and since I'm using bootstrap 4 the default display:flex property used with the row class was causing unexpected output with the slide elements.

Adding a col within the wrapping row div fixed the issue for me.

<div class="row">
    <div class="col-12">
       ../slider markup
    </div>
</div>

Although, this may not be directly related to the op's issue, I thought I'd post as other users may encounter a similar problem as I did and find this thread.

edited Nov 04 '19 at 06:57

Paolo Forgia

6,572
8
46
58

answered Mar 27 '18 at 00:52

Eddie Padin

645
1
8
13

1

For ``bulma`` you can use ``
``
– Yannic Hamann Oct 05 '19 at 10:57
2

I noticed that a wrapper with `display: grid` can also create this trouble in Safari. In my case, changing `grid-template-columns: 1fr 1fr` to `grid-template-columns: 50% 50%` fixed the problem. It looks like Safari needs a more specific width. – Ryan Burney Dec 09 '19 at 19:17
Add `width: 100%` if you're not using bootstrap. – dibery Sep 02 '22 at 03:52
Not only in Safari. There's an issue with "fr" units. Changing to anything else solves the problem. Thank you @RyanBurney – Konstantin Kozirev Dec 29 '22 at 16:06

Black · Answer 2 · 2022-09-23T08:00:12.410

10

Short Answer:

Make sure that your slick slider is inside of a container which is set as display: block

edited Sep 23 '22 at 08:00

answered Feb 12 '20 at 14:21

Black

18,150
39
158
271

Added the slick slider into a dialog, had width of 0. After I set min width, I noticed that if I slide, the slider rearranges on each slide and finally reaches the point I'm after. Anyway, adding display: block to the dialog fixed it. Thanks for the hint! – DBR Jun 01 '23 at 17:44

score 9 · Answer 3 · answered Nov 04 '19 at 06:53

9

I have the same problem only on screens <768px with bootstrap4, slick (and owlCarousel) set width more then 10000px to there container. The issue was that's the bootstrap container (.container) does't have a width property <768px, set it to 100% resolve the problem.

answered Nov 04 '19 at 06:53

Pavel L.

139
1
3

Same, seems like slick just doesn't like being inside of a flex container without a specific width and will grow to infinity. Setting a width: 100% on the top level `.container` fixed it. Thank you. – Cobertos Nov 03 '20 at 18:07

score 6 · Answer 4 · answered Jan 19 '18 at 23:09

6

I had this same issue and was also dealing with some inherited bad css from stylesheets that I did not author. In my case I found 2 problems:

body had a declaration of display: table
.page (a page wrapper) had display: inline-block

So I would check to make sure that the slick slider is not nested inside of any element that is displayed as table or inline-block

answered Jan 19 '18 at 23:09

Spencer Rysman

69
1
2

4

A wrapper element with ``display: flex`` could also cause the problem. – Yannic Hamann Oct 05 '19 at 11:02
I also had the same issue. Inherited a site that used display:table; and display:table-cell; Changing them to block and inline-block solved the issue. – pinksharpii Oct 15 '19 at 17:15

score 5 · Answer 5 · answered Apr 20 '22 at 16:20

We can't always remove all container's display: flex and recode all CSS in page just to make a library work.

In my experience I found that the problem appears after this line:

_.$slideTrack.width(Math.ceil((_.slideWidth * _.$slideTrack.children('.slick-slide').length)));

in version 1.8.1, where the library sets .slick-track's width it seems that any flex container (any, not the direct container) will generate the issue.

I fixed forcing (and updating on window resize event) a fixed width to the slider main wrapper, that is the element where you instantiate your slider with $('#slider-wrap').slick(...), using this little Javascript snippet:

var $sliderwrap = $('#slider-wrap');

// fix for flex begins here ----
function setW() {
    // use parent width, not always the right way
    // change it if your $sliderwrap parent width 
    // does not match your $sliderwrap width
    $sliderwrap.width($sliderwrap.parent().width());
}
setW();
window.addEventListener('resize', setW);
// end fix here ----

// instantiate the slider
$sliderwrap.slick(...);

I hope this can help anyone.

score 2 · Answer 6 · answered Aug 19 '20 at 18:59

2

On initial loading, slick will not take the width, in IOS - in few devides, if the internal content is heavy.

Its fixed for me by adding css max-width to slick-track

Check with following:

$(".slick-track").css("max-width", $(window).width());

answered Aug 19 '20 at 18:59

M Jos

71
2

.slick-track { max-width: 100%; } – Ali H. Kudeir Oct 28 '21 at 22:52
this code is broken on a small device, not recommended to use. thank you – MD Mahmudul Hasan Jan 30 '23 at 13:11

score 2 · Answer 7 · answered Dec 07 '20 at 13:40

I encountered the same issue and after attempting the above-mentioned to no avail. I revisited the docs and added this

variableWidth: true

to the javascript config block. so your code looks like this

$('.slider').slick({
    infinite: false,
    speed: 300,
    initialSlide: 1,
    slidesToShow: 3,
    slidesToScroll: 1,
    variableWidth: true, <=== change here
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 650,
        settings: {
            initialSlide: 2,
            slidesToShow: 1
        }
    }]
});

score 1 · Answer 8 · answered Jan 27 '21 at 05:03

1

Don't use display: flex for the slick containter. It will cause problem on mobile.

answered Jan 27 '21 at 05:03

Trong Lam Phan

2,292
3
24
51

Lubo · Answer 9 · 2021-06-19T14:20:22.740

1

main div container must be
display:block;

or

display:grid; grid-template-columns:repeat(4,minmax(0,1fr));

minmax(0,1fr) is the way. Or a defined width (px, em,...). display:flex; is problem.

edited Jun 19 '21 at 14:20

answered Jun 16 '21 at 10:53

Lubo

169
1
14

score 1 · Answer 10 · answered Oct 07 '21 at 21:53

1

If any block thing works, add to your CSS file:

.slick-track {display: flex !important}

.slick-slide {height: auto;}

answered Oct 07 '21 at 21:53

samu101108

675
7
23

score 0 · Answer 11 · answered May 10 '22 at 18:17

0

In my case I wanted to have at-least one entire slide always visible on both Desktop and Mobile. To do this I used the CSS vw property

.slick-slide,.slick-slide img {
   max-width:90vw;
}

answered May 10 '22 at 18:17

G Chris DCosta

311
3
7

score 0 · Answer 12 · answered Feb 21 '23 at 16:51

I got the same issue. To me the problem was caused by a (distant) parent of the slick block having the property display:grid. Turning it back to display:block fixed the problem for me.

So basically Slick shouldn't be even remotely contained in a flex or grid element.

Slick slider gets wrong width

12 Answers12

Short Answer: