slick-track transform translate3d, and width CSS property are insanely high

[akinhwan]

Every now and then sometimes when I slide rapidly or too quickly before the previous swipe animation is complete, I am finding that the translate3d css property is becoming too high. So high in fact that none of my slides are visible and it just completely dissappears.

[akinhwan]

I'm getting this issue even after setting transformEnabled: false in my slickOptions

[davideserafini]

I had a very similar issue with width becoming so high to require the "e notation" as well. The container element was a flex item with flex-basis: 100% but without max-width: 100%. Adding max-width fixed the issue as of now.

Don't know if this might apply to your problem as well, hope it can help!

[vbbalaji]

Im also having the same problem while using 100% of the container width. Im using Bootstrap 3.3.1

[erthi16]

I had the same problem with flex items containing carrousels. My original solution was to put overflow: hidden on all my flex elements (but I had no control on child elements that could inserted like text, image or carrousel elements). As my clients could use tooltips that spiled out of their container, the overflow: hidden was not acceptable. The max-width was the solution for my project! Thanks to you!!!!

[bulkerke]

I had a very similar issue with width becoming so high to require the "e notation" as well. The container element was a flex item with flex-basis: 100% but without max-width: 100%. Adding max-width fixed the issue as of now.

Don't know if this might apply to your problem as well, hope it can help!

Where do you insert the max-width: fixed; ?

[davideserafini]

@bulkerke I've added max-width to the container element of the carousel, the one that has display:flex

[ajeshraj666]

Hi,

Please check the script and styles below. It's Working

$('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 4, slidesToScroll: 1, asNavFor: '.slider-for', dots: true, vertical:true, focusOnSelect: true });

// transform issue var numSlides = $('.slider-nav li').length; //you can set the value here if (numSlides == 2 || numSlides == 3) {
// Add a CSS class to the slider-nav $('.slider-nav').addClass('small-slides'); }

[ajeshraj666]

Please check my answer on stack overflow https://stackoverflow.com/questions/66170709/slick-slider-transform-issue-on-nav-slider/76211151#76211151