Slick slider gets wrong width

slick slider width
slick slider arrows
slick slider fade effect
variable width slick slider codepen
slick slider flexbox
slick-track
slick dots
slick slider infinite scroll

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

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.

wrong width calculation · Issue #2934 · kenwheeler/slick · GitHub, + slick, however it loades the children elements with wrong widths. the slider items; Loaded the class in jquery followed by the slick function  I have tried to fix it with CSS, given 100% width to the slick-track div but nothing worked. Following is the container : slick-track and below is the inline css being added : width: 2.14748e+08px; opacity: 1; transform: translate3d(-8.05305e+07px, 0px, 0px); Below is how I am initializing the slider in my component:

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

Slick with 3 items and infinite scroll, When setting up the Slick carousel with the preset below width get's calculated in a wrong way. Setting infinite to false solves the problem. Hey guys, react-slick is calculating the width of the slick-slide incorrectly. It's inside of a container with 1190px and I have slidesToShow: 5, and it's calculating the width as 268px per card when it should be 238px. Not sure what's going on here.

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.

slick-slide calculating width wrong · Issue #809 · akiran/react-slick , Not sure what's going on here. I'm on a screen size of 1440px and there's 50px of padding on slick-list so it looks like it's almost trying to get the  slick-slider classes are getting widths of 3500+ pixels and growing each time the slider slides. It works in an isolated test case and on our mockups, so I can't isolate what's causing this, except possibly the speed at which the images are loading. Wondering if anybody has an idea of what could be causing this or how to work around it

Width of slides round up / wrong width? · Issue #2728 · kenwheeler , Inside this container I initialise the slick-slider with 7 elements (divs - no Each div/slide gets a width of 205px - because 1433 / 7 = 204.71. Detect when slick slider initialises. Ask Question Asked 5 years, 3 months ago. Active 3 years, 11 months ago. Viewed 46k times Slick slider gets wrong width. 0.

Wrong width of the slides with margins · Issue #1789 · kenwheeler , i use slick slider with this option: $("#bottom").slick({ slidesToShow:9 }); but after a window resize slides not always fit the size of the viewing  There seems to be incorrect width calculations in a few situations, one being if your slick element creates a vertical scrollbar on the window, its width calculation is off by 17px (the width of the window scrollbar).

Using slick inside of a flexbox element causes slick to grow , If you initialize a slick carousel inside of a flexbox element, then the slick carousel increases it's width exponentially. For me adding overflow: hidden; to the slider element (which gets the slick-initialized slick-slider classes)  Slick slider may exceed browser width. Actual container width is set to value that can accomodate all it's slides. The best solution for setting slide width is to use width of the actual browser window.

Comments
  • try to change width the reload page
  • @BilalHussain please explain further
  • "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.
  • 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..
  • Thank you very much, your answer helped me (problems with slick slider in Internet Explorer)!
  • Thanks!! It resolved my issue. I'm working with angular 8 and bootstrap 4.
  • For bulma you can use <div class="column is-12">
  • 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.
  • A wrapper element with display: flex could also cause the problem.
  • 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.