kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.34k stars 5.88k forks source link

Is it possible to bind customPaging to only "some" slides? #4122

Open laurabennett opened 2 years ago

laurabennett commented 2 years ago

I am working on an event schedule slider where a day has multiple events and the slider contains events from multiple days. I would like the ability to skip ahead to the next day. Ex. Day 1 Event A Day 1 Event B Day 1 Event C Day 2 Event D Day 2 Event E Day 3 Event F Day 3 Event G

Using custom Paging I can create links : Day 1 (A), Day 1 (B), Day 1 (C), Day 2 (D), Day 2 (E), Day 3 (F), Day 3 (G) Wondering if it is possible to only list: Day 1 (A), Day 2 (D), Day 3 (F)

Thanks!

laurabennett commented 2 years ago

The slickGoTo method seems to be the way to go here with one exception. If I have the above structure but the slider is 3 slides wide, it won't let me go to "Day 3" because there are only 2 events. Would be nice if the slickGoTo method would slide to the end if going to the index isn't possible.

Maybe related to #3195

laurabennett commented 2 years ago

Found a work around. Here is my js code.

$('.schedule').slick({ slide: ".copy", mobileFirst: true, infinite: false, nextArrow: "", prevArrow: "", slidesToShow: 1, responsive: [{ breakpoint: 750, settings: { slidesToShow: 2 } }, { breakpoint: 1000, settings: { slidesToShow: 3 } }, { breakpoint: 1500, settings: { slidesToShow: 4 } }] }); $('.page').click(function(e) { var data = $(this).attr('data-href'); var numberOfSlides = $('.schedule').slick('getSlick').slideCount; var slidesToShow = $('.schedule').slick('slickGetOption','slidesToShow');

if (data > numberOfSlides - slidesToShow){
  data = numberOfSlides - slidesToShow;
}
$('.schedule').slick('slickGoTo', data);
$('.active').removeClass('active');
$(this).addClass('active');

});