Używam Slick.js do wyświetlania slajdów na mojej stronie. Działa zgodnie z oczekiwaniami, jednak próbuję dodać licznik suwaka na dole suwaka, który pokazywałby 1/4, jeśli pokazany jest pierwszy slajd, 2/4, jeśli pokazany jest drugi slajd itp. Próbowałem użyć Funkcja dotsClass: 'custom_paging' jednak pokazuje 1 z 4, 2 z 4 jako listę, a nie tylko 1/4 lub 2/4, itd. W zależności od pokazanego slajdu.
Kod:
$(document).ready(function () {
$('.project-carousel').slick({
centerMode: true,
infinite: true,
centerPadding: '40px',
slidesToShow: 3,
dots: true,
dotsClass: 'custom_paging',
customPaging: function (slider, i) {
var slideNumber = (i + 1),
totalSlides = slider.slideCount;
return slideNumber + ' of ' + totalSlides;
},
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.slick-slider').on('click', '.slick-slide', function (e) {
e.stopPropagation();
var index = $(this).data("slick-index");
if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
$('.slick-slider').slick('slickGoTo', index);
}
});
});
1
user38208
20 listopad 2019, 16:01
1 odpowiedź
Właściwie znalazłem rozwiązanie tego i poniżej dodając poniższy kod:
var $status = $('.counter-info');
var $slickElement = $('.project-carousel');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.html( '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>');
});
2
user38208
20 listopad 2019, 16:16