Slick.js: obtenir des diapositives actuelles et totales (ie. 3/5)

En Utilisant Slick.js - Comment obtient-on des diapositives actuelles et totales (ie. 3/5) comme une alternative plus simple aux points?

On m'a dit que je pouvais utiliser le rappel customPaging en utilisant les objets d'argument de rappel, mais qu'est-ce que cela signifie exactement?

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

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

23
demandé sur Gleb Kemarsky 2014-09-15 15:43:03

7 réponses

L'objet slider contient une variable contenant le nombre de diapositives. 

$('.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;
    }
});

DÉMO

Mise à jour pour Slick 1.5+ (testé jusqu'à 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
});

DÉMO

45
répondu Mx. 2017-10-30 09:46:44

Cela pourrait aider:

  • vous n'avez pas besoin d'activer les points ou la personnalisation.
  • Position .Slick-compteur avec 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/

3
répondu Joe L. 2014-12-10 21:42:49

J'utilise ce code et ça fonctionne:

.slider - ceci est le bloc de curseur

.count-selector qui utilise pour le compteur de retour 

$(".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
});
3
répondu Cvalya 2017-08-10 16:57:28

Basé sur la première proposition publiée par @ Mx. (posté le sept.15th 2014) j'ai créé une variante pour obtenir un balisage HTML décent pour le support 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>';
    }
});

Démo JsFiddle

2
répondu MartinDubeNet 2016-07-14 15:53:38

Vous devez lier init avant l'initialisation.

$('.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);
        });
1
répondu Bharat Parmar 2017-04-05 13:02:10 
Modifications are done to the new Slick version 1.7.1.

Voici un exemple de script mis à jour: jsfiddle

0
répondu Magni Hansen 2017-08-15 11:23:58

L'utilisation de la méthode précédente avec plus de 1 diapositive à la fois me donnait le mauvais total, donc j'ai utilisé la "dotsClass", comme ceci (sur 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;
        }
    }
}
0
répondu drinkAcoffee 2017-09-22 12:29:33