Do slick slider if the number of elements is less or the same as should be displayed, then the arrows disappear and automatic scrolling stops working, how to implement it?
Codepen.io example
The fact that the arrows disappear is not critical, but the fact that scrolling no longer works very poorly.
Since I use a double slider slick, if there is no automatic scrolling in dots (the second slider), then the main one is not scrolled.

Example js, if you set the number of displayed slides to 3 (the number is greater than or equal to the sum of the slides), then autoscroll will turn off

$(document).ready(function(){ $('.slidder1').slick({ slidesToShow: 1, slidesToScroll: 2, asNavFor: '.slidder2', }); $('.slidder2').slick({ slidesToShow: 2, slidesToScroll: 1, asNavFor: '.slidder1', dots: true, autoplay: true, autoplaySpeed: 2000, }); });
  • Add the condition yourself that if it is less than or equal to n, then let the slides be pressed sequentially. Slick is not so versatile. - DaemonHK
  • I thought about this, tell me, can you have an example of this implementation? So as not to write from scratch. - Ivan Smirnov
  • one
    Write from scratch) There will be questions or problems, update your question - DaemonHK

2 answers 2

I agree that the decision is very clumsy, but it works.
We look at the number of slides in the slider responsible for navigation and if they are less than the specified we cancel the opportunity to fly into the sides, and since this slider does not break, then we automatically set the scrolling to the first one.

Js

  $('.slider-front-nav').on('setPosition', function(event, slick){ var length_slid = $('.slider-front-nav .slider-front-nav-unit.slick-slide').length; if (length_slid <= 4) { $('.slider-front-nav').addClass("stop-transform"); }else{ $('.slider-front-nav').removeClass("stop-transform"); } });

CSS

  .slider-front-nav.stop-transform .slick-track { transform: translate3d(0px, 0px, 0px) !important; } 

     .slick-list, .slick-track{ min-width: 100%; }