logo标签列表

Slick.js：获取当前和总幻灯片数（即3/5）

javascriptjqueryslick.js
48
使用Slick.js - 如何获取当前和总幻灯片（即3/5），作为点的更简单的替代方法？
我被告知可以使用customPaging回调函数，使用回调参数对象，但这究竟是什么意思？
$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    dots: true,
    customPaging: function (slider, i) {
        return slider.slickCurrentSlide + '/' + (i + 1);
    }
});

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

10个回答
100

slider对象包含幻灯片数量作为属性。

Slick < 1.5

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

演示

Slick 1.5+ 的更新（测试至 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
});

演示

Slick 1.9+的更新

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({
    autoplay: true,
    dots: true
});

演示

使用slidesToShow的示例

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

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  // no dots -> no slides
  if(!slick.$dots){
    return;
  }
  
  //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
  var i = (currentSlide ? currentSlide : 0) + 1;
  // use dots to get some count information
  $status.text(i + '/' + (slick.$dots[0].children.length));
});

$slickElement.slick({
  infinite: false,
  slidesToShow: 4,
  autoplay: true,
  dots: true
});

演示

1
ul.slick-dots { li { &.slick-active { display: block; } display: none; } } 通过这个 SCSS，我成功地显示了正确的项目。非常感谢！ - HongPong
2
确保在初始化Slick代码之前定义init事件监听器，否则它不会起作用。 - Jones03
1
如果您想要样式化分页，可以使用以下代码：$status.html('<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>');！非常棒的答案。 - Shamseer Ahammed
1
在这种情况下，您无法使用 slick.slideCount 信息，但是该信息可以通过 slick.$dots [0] .children.length 获得。这里有一个例子 http://jsfiddle.net/rLckgsxh/ - Mx.
1
做得好，更新得很棒，上一个版本完美运行！ - Loosie94
显示剩余6条评论
6

在初始化之前，您需要绑定init。

$('.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);
        });
4
我使用以下代码并且它有效：
.slider - 这是滑块区块的名称
.count - 选择器用于返回计数器
$(".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
});
1
想知道除克隆幻灯片外的实际幻灯片数量，slick.slideCount帮了我很多。非常感谢。 - techloris_109
3

这可能会有所帮助：

  • 您不需要启用点或自定义分页。
  • 使用CSS定位.slick-counter。

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/

2
使用之前的方法同时处理多个幻灯片会导致总数错误，所以我使用了“dotsClass”，代码如下（在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;
        }
    }
}
这对我实际起作用了 - 但它在控制台中抛出错误，说“未捕获的类型错误：无法读取空值的属性'add'”，这意味着它调用了两次slick :-( - coops
2

基于@Mx发布的第一个命题（发布于2014年9月15日），我创建了一个变体，以获得适当的HTML标记来支持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

2

我遇到了一个关于多个幻灯片的问题。版本1.8.1

如果slidesToShow和slidesToScroll大于1

诀窍在于slick.slickGetOption('slidesToShow');

$(".your-selector").on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    var i = (currentSlide ? currentSlide : 0) + 1;
    var slidesToShow = slick.slickGetOption('slidesToShow');
    var curPage = parseInt((i-1)/slidesToShow) + 1;
    var lastPage =  parseInt((slick.slideCount-1)/slidesToShow) + 1;
    $('.your-selector').text(curPage);
    $('.your-selector').text(lastPage);
});

请注意，curPage和lastPage是分开的。我必须将它们着不同的颜色。
基于得票最高的答案。
1
非常感谢。我和上面的情况一样。这个方法很有效。 - Mossawir Ahmed
0
Modifications are done to the new Slick version 1.7.1.

这是一个更新的脚本示例：jsfiddle

0
如果你想要页面编号：
例如：1 2 3 4...
HTML：
<div class="slider">
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  ...
  ...
</div>

JS：

$('.slider').on('init reInit afterChange',
    function(event, slick, currentSlide){
        var status = $(this).find('.slider-number span');
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = slick.currentSlide;
        var slidesLength = slick.slideCount;
        var numberSlide1 = i + 1 <= slidesLength ? i + 1 : i - (slidesLength - 1);
        var numberSlide2 = i + 2 <= slidesLength ? i + 2 : i - (slidesLength - 2);
        var numberSlide3 = i + 3 <= slidesLength ? i + 3 : i - (slidesLength - 3);
        var numberSlide4 = i + 4 <= slidesLength ? i + 4 : i - (slidesLength - 4);

        status.html('<strong>'+numberSlide1+'</strong>' + ' ' +
            numberSlide2 + ' ' +
            numberSlide3 + ' ' +
            numberSlide4 + '...');
});

JsFiddle演示

0
如果您想在幻灯片更改之前更新计数，请使用Slick 1.8+以下的方法：
var slidesCountEl = $('<div class="slick-slides-count" />');

$('.slick-slider').on('init reInit beforeChange', function(event, slick, currentSlide, nextSlide) {

  var slickEl = $(event.target);

  if ( !slickEl.find('.slick-slides-count').length ) {

    slidesCountEl.prependTo( slickEl );

    slidesCountEl = slickEl.find('.slick-slides-count');

  }

  var currentSlideCount = (nextSlide ? nextSlide : 0) + 1;

  slidesCountEl.html( currentSlideCount + '<span>/</span>' + slick.slideCount );

});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接