There is such an example slider in the slider:

$('.sl').slick({ slidesToShow: 3, slidesToScroll: 1, draggable: false, beforeChange: function(){ $('.sl-i').slick('slickGoTo', 0, true); } }); $('.sl-i').slick({ slidesToShow: 2, slidesToScroll: 1, arrows: false }); 
 .box { max-width: 200px; width: 100%; height: 200px; background: #ccc; } .sl-item { padding: 5px; } .box-sm { width: 50px; height: 50px; margin: 2px; background: tomato; } 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <div class="sl"> <div class="sl-item"> <div class="box">1</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> <div class="sl-item"> <div class="box">2</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> <div class="sl-item"> <div class="box">3</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> <div class="sl-item"> <div class="box">4</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> </div>

I do not understand why beforeChange and 'slickGoTo' do not work. When scrolling through the main slider internal must be rebuilt on the first slide. What is wrong doing?

  • may need to use $('.sl-i').slickGoTo(0); ? - Sublihim
  • @Sublihim, no difference. - HamSter
  • then the question is, do you use beforeChange correctly? If you add a simple alert there, will it work? - Sublihim
  • On the developers' website, the beforeChange processing is represented by the following code $('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){ console.log(nextSlide); }); - Sublihim
  • @Sublihim doesn’t want to work either, hangs altogether - HamSter

1 answer 1

The parent slider catches the beforeChange event each time it moves in the descendant sliders. If in response to this event to move the children, everything hangs. This can be seen by sending entries to the console.

So that the event in the descendant does not reach the parent, add return false; . The stopPropagation() method did not work.

Check the result: http://codepen.io/glebkema/pen/gLJGZE

 $('.sl').slick({ slidesToShow: 3, slidesToScroll: 1, draggable: false }); $('.sl-i').slick({ slidesToShow: 2, slidesToScroll: 1, arrows: false }); $('.sl').on('beforeChange', function(event, slick, currentSlide, nextSlide){ //console.log('beforeChange'); $('.sl-i').slick('slickGoTo', 0, true); }); $('.sl-i').on('beforeChange', function(event, slick, currentSlide, nextSlide){ //console.log('beforeChange child'); return false; }); 
 .box { max-width: 200px; width: 100%; height: 200px; background: #ccc; } .sl-item { padding: 5px; } .box-sm { width: 50px; height: 50px; margin: 2px; background: tomato; } 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <div class="sl"> <div class="sl-item"> <div class="box">1</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> <div class="sl-item"> <div class="box">2</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> <div class="sl-item"> <div class="box">3</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> <div class="sl-item"> <div class="box">4</div> <div class="sl-i"> <div class="item"> <div class="box-sm">1</div> </div> <div class="item"> <div class="box-sm">2</div> </div> <div class="item"> <div class="box-sm">3</div> </div> </div> </div> </div>

  • Super, thank you so much !!!!! - HamSter