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