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..

Caper

try to change width the reload page – Pinko

“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. – Natation

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.. – Footless

Answer 1

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.

Cardie

For bulma you can use <div class="column is-12"> – September

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. – Glaswegian

Add width: 100% if you're not using bootstrap. – Agnomen

Not only in Safari. There's an issue with "fr" units. Changing to anything else solves the problem. Thank you @RyanBurney – Civility

Answer 2

Short Answer:

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

Parma

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! – Decoction

Answer 3

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.

Memoried

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. – Misapply

Answer 4

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:

1. body had a declaration of display: table
2. .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

Aponeurosis

A wrapper element with display: flex could also cause the problem. – September

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. – Pavid

Answer 5

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.

Baumgartner

Answer 6

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

Torquay

Answer 7

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

Crabbe

.slick-track { max-width: 100%; } – Cottle

this code is broken on a small device, not recommended to use. thank you – Dihedral

Answer 8

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

Lewin

Answer 9

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.

Carotenoid

Answer 10

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

.slick-track {display: flex !important}

.slick-slide {height: auto;}

Heard

Answer 11

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

Obsolescent

Answer 12

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.

Claudio

Answer 13

Add this to the slick init class

.multiple-items {
 overflow: hidden;
 min-width: 100%;
 width: 0;
}

Aracelyaraceous