Slick.js: pobierz bieżące i całkowite slajdy (np. 3/5)

Question

Korzystanie z Slick.js - w jaki sposób uzyskać bieżące i całkowite slajdy (np. 3/5) jako prostszą alternatywę dla kropek?

Powiedziano mi, że mogę używać wywołania zwrotnego customPaging przy użyciu obiektów argumentu wywołania zwrotnego, ale co to dokładnie oznacza?

$('.slideshow').slick({ 
    slide: 'img', 
    autoplay: true, 
    dots: true, 
    customPaging: function (slider, i) { 
     return slider.slickCurrentSlide + '/' + (i + 1); 
    } 
}); 

http://jsfiddle.net/frank_o/cpdqhdwy/1/

Answer 1

Przedmiotem slider zawiera zmienną, która jest zawierający liczbę slajdów.

$('.slideshow').slick({ 
    slide: 'img', 
    autoplay: true, 
    dots: true, 
    dotsClass: 'custom_paging', 
    customPaging: function (slider, i) { 
     //FYI just have a look at the object to find available information 
     //press f12 to access the console in most browsers 
     //you could also debug or look in the source 
     console.log(slider); 
     return (i + 1) + '/' + slider.slideCount; 
    } 
}); 

DEMO

Aktualizacja dla Slick 1.5+ (testowane aż 1.8.1)

var $status = $('.pagingInfo'); 
var $slickElement = $('.slideshow'); 

$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.text(i + '/' + slick.slideCount); 
}); 

$slickElement.slick({ 
    slide: 'img', 
    autoplay: true, 
    dots: true 
}); 

DEMO

Answer 2

To może pomóc:

• Nie trzeba włączać kropek ani niestandardowej strony.
• Pozycja .slick-counter z CSS.

CSS

.slick-counter{ 
    position:absolute; 
    top:5px; 
    left:5px; 
    background:yellow; 
    padding:5px; 
    opacity:0.8; 
    border-radius:5px; 
} 

JavaScript

var $el = $('.slideshow'); 

$el.slick({ 
    slide: 'img', 
    autoplay: true, 
    onInit: function(e){ 
    $el.append('<div class="slick-counter">'+ parseInt(e.currentSlide + 1, 10) +'/'+ e.slideCount +'</div>'); 
    }, 
    onAfterChange: function(e){ 
    $el.find('.slick-counter').html(e.currentSlide + 1 +'/'+e.slideCount); 
    } 
}); 

http://jsfiddle.net/cpdqhdwy/6/

Answer 3

podstawie pierwszej propozycji zamieszczonych przez @Mx. (opublikowano 15 września 2014 r.) Stworzyłem wariant, aby uzyskać przyzwoity znacznik HTML dla wsparcia ARIA.

$('.slideshow').slick({ 
    slide: 'img', 
    autoplay: true, 
    dots: true, 
    dotsClass: 'custom_paging', 
    customPaging: function (slider, i) { 
     //FYI just have a look at the object to find available information 
     //press f12 to access the console in most browsers 
     //you could also debug or look in the source 
     console.log(slider); 
     var slideNumber = (i + 1), 
      totalSlides = slider.slideCount; 
     return '<a class="custom-dot" role="button" title="' + slideNumber + ' of ' + totalSlides + '"><span class="string">' + slideNumber + '</span></a>'; 
    } 
}); 

jsFiddle DEMO

Answer 4

Trzeba związać Init przed inicjalizacji.

$('.slider-for').on('init', function(event, slick){ 
     $(this).append('<div class="slider-count"><p><span id="current">1</span> von <span id="total">'+slick.slideCount+'</span></p></div>'); 
    }); 
    $('.slider-for').slick({ 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     arrows: true, 
     fade: true 
    }); 
    $('.slider-for') 
     .on('afterChange', function(event, slick, currentSlide, nextSlide){ 
      // finally let's do this after changing slides 
      $('.slider-count #current').html(currentSlide+1); 
     }); 

Answer 5

Używam tego kodu i ona działa:

.slider - to blok suwak

.count - selektor, które wykorzystują do licznika powrotnej

$(".slider").on("init", function(event, slick){ 
    $(".count").text(parseInt(slick.currentSlide + 1) + '/' + slick.slideCount); 
}); 

$(".slider").on("afterChange", function(event, slick, currentSlide){ 
    $(".count").text(parseInt(slick.currentSlide + 1) + '/' + slick.slideCount); 
}); 
$(".page-article-item_image-slider").slick({ 
    slidesToShow: 1, 
    arrows: true 
}); 

Answer 6

Modifications are done to the new Slick version 1.7.1. 

Tutaj to zaktualizowany przykład skryptu: jsfiddle

Answer 7

Używanie poprzedniej metody z więcej niż jednym slajdem w czasie dawało mi złą sumę, więc użyłem "dotsClass", tak jak to (na v1.7.1):

// JS

var slidesPerPage = 6 

$(".slick").on("init", function(event, slick){ 
    maxPages = Math.ceil(slick.slideCount/slidesPerPage); 
    $(this).find('.slider-paging-number li').append('/ '+maxPages); 
}); 

$(".slick").slick({ 
    slidesToShow: slidesPerPage, 
    slidesToScroll: slidesPerPage, 
    arrows: false, 
    autoplay: true, 
    dots: true, 
    infinite: true, 
    dotsClass: 'slider-paging-number' 
}); 

// CSS

ul.slider-paging-number { 
    list-style: none; 
    li { 
     display: none; 
     &.slick-active { 
      display: inline-block; 
     } 
     button { 
      background: none; 
      border: none; 
     } 
    } 
}