javascript - theme - Slick.js: Obtener diapositivas actuales y totales(es decir, 3/5)

slick theme

Question

Uso de Slick.js : ¿cómo se obtienen diapositivas actuales y totales (es decir, 3/5) como una alternativa más simple a los puntos?

Me han dicho que puedo usar la customPaging llamada customPaging utilizando los objetos de argumento de devolución de llamada, pero ¿qué significa eso exactamente?

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

Basado en la primera proposición publicada por @Mx. (publicado el 15 de septiembre de 2014) Creé una variante para obtener un formato HTML decente para el soporte de 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 2

El objeto slider contiene una variable que contiene el recuento de diapositivas.

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

Actualización para Slick 1.5+ (probado hasta 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 3

Es necesario vincular init antes de la inicialización.

$(''.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 4

Esto podría ayudar:

• No es necesario habilitar puntos o customPaging.
• Posicionar .slick-counter con 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 5

Usar el método anterior con más de 1 diapositiva a la vez me dio el total incorrecto, así que usé la "clase de puntos", como esto (en 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;
        }
    }
}

Answer 6

Yo uso este código y funciona:

.slider - esto es bloque deslizante

.count - selector que se usa para el contador de retorno

$(".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 7

Modifications are done to the new Slick version 1.7.1.

Aquí hay un ejemplo de script actualizado: jsfiddle