Slick: slidesToShow, slidesToScroll set 0 to produce chrome running out of memory

[gt06]

I have implemented slick slider dynamically in Magento. On the basis of the second slider, the slide will be the change of the first slider. I want second slider in ul li position with vertically aligned with no scrollling. When I set slidesToShow, slidesToScroll set to 0 , chrome shows running out of memory.

[leggomuhgreggo]

Can you recreate in a reduced test case like a codepen or jsfiddle? Thanks!

[Luxian]

I think I had the same issue. I was able to fix it by casting slidesToShow and slidesToScroll values to integer using parseInt() before passing them to slick.

They were coming from a HTML data- attribute as a string and somewhere inside slick library there is calculation using … + slidesToScroll … which caused string value to be concatenated instead of sum being calculated. With a big enough slider the values resulted in awful long string and caused the memory issue.

I'm not sure the JSFiddle actually works, but here is something that sometimes crashes my Chrome on a 16Gb machine or if it doesn't it will not scroll properly (scrolling from 4 to 44 to 444): https://jsfiddle.net/7w3wcqp3/4/

I know it's not actually a problem caused by slick, but I think it will save other hours of debugging if the values will be casted to integer inside slick. Thanks for the awesome slider! <3

[nikola-wd]

Not a perfect solution but it worked for me:

.posts-hero-carousel .slick-track {
    transform: translate3d(0px, 0px, 0px) !important;
}

This is css that prevents carousel to scroll along with main slider. Hope it helps :)

[master-general]

@Luxian , your solution also works for me. I've used parseInt on 'slidesToShow' which comes from data attributes (JSON.parse). Thank you man.

[Edely]

Still happening for me.

var $slickConfig = {
    infinite: false,
    arrows: false,
    dots: false,
    adaptiveHeight: true,
    mobileFirst: true,    
    slidesToShow: 2,
    slidesToScroll: 1,
    responsive: [
      { 
        breakpoint: 500,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 0,
        }
      }
    ]
  }  
  $('.slickSport').slick($slickConfig);

Here is a Code Pen. Even the iframe in the Code Pen is causing run out of memory.
https://codepen.io/Edely/pen/bKayGL

[lguerreromx]

Not a perfect solution but it worked for me:

.posts-hero-carousel .slick-track {
  transform: translate3d(0px, 0px, 0px) !important;
}

This is css that prevents carousel to scroll along with main slider. Hope it helps :)

Not elegant but very effective.

[anou]

.posts-hero-carousel .slick-track {
  transform: translate3d(0px, 0px, 0px) !important;
}

I confirm the efficiency . Thanks to @nikola-wd for his solution