Javascript Slick.js：获取当前和全部幻灯片（即3/5）

使用-如何获得当前和总幻灯片（即3/5）作为点的简单替代方案

有人告诉我可以使用callback参数对象使用

customPaging

回调，但这到底意味着什么

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

---

滑块对象包含幻灯片计数作为属性

光滑度<1.5

更新Slick 1.5+（在1.8.1之前测试）

Slick 1.9的更新+

使用

slidesToShow

这可能会有帮助：

• 您不需要启用点或自定义分页
• 位置。使用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);
  }
});

var$el=$（'.slideshow'）；
$el.slick({
幻灯片：“img”，
自动播放：对，
onInit:函数（e）{
$el.append（“”+parseInt（e.currentSlide+1,10）+’/“”+e.slideCount+“”）；
},
onAfterChange:函数（e）{
$el.find（'.slick counter'）.html（e.currentSlide+1+'/'+e.slideCount）；
}
});

---

基于@Mx发布的第一个命题。（发布于2014年9月15日）我创建了一个变体，以获得适当的HTML标记以提供支持

$（'.slideshow'）.slick({
幻灯片：“img”，
自动播放：对，
点：是的，
dotsClass:“自定义分页”，
自定义分页：函数（滑块，i）{
//仅供参考，只需查看对象即可找到可用信息
//在大多数浏览器中，按f12键可访问控制台
//您还可以调试或查看源代码
控制台日志（滑块）；
变量slideNumber=（i+1），
totalSlides=slider.slideCount；
返回“
您需要在初始化之前绑定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);
        });

$（'.slider for'）。在（'init'，函数上（事件，滑动）{
$（this.append（“1 von”+slick.slideCount+”
）；
});
$（'.slider for'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：是的，
褪色：真的
});
$（'.用于''的滑块）
.on（'afterChange'，功能（事件、滑动、当前滑动、下一次滑动）{
//最后，让我们在更改幻灯片后执行此操作
$（'.slider count#current'）.html（currentSlide+1）；
});
我使用此代码，它可以工作：

.滑块-这是滑块

.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张幻灯片的总数是错误的，因此我使用了“dotsClass”，如下所示（在v1.7.1上）：

//JS

//CSS

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

如果需要页面编号：

示例：12 3 4

HTML:


一些内容
1 2 3 4...
一些内容
1 2 3 4...
...
...

JS:

$（'.slider'）。在（'init reInit afterChange'上，
功能（事件、滑动、当前滑动）{
var status=$（this.find（'.slider number span'）；
//currentSlide在init上未定义——在这种情况下将其设置为0（currentSlide基于0）
var i=光滑的电流滑动；
var slidesLength=slick.slideCount；
var numberSlide1=i+1我在多张幻灯片中遇到问题。版本
1.8.1

如果
slidesToShow
和
slidesToScroll
超过
1

技巧在于
slick.slickGetOption（'slidesToShow'）；

注意
curPage
和
lastPage
是分开的。我必须用不同的颜色

基于最上面的投票结果
ul.slick-dots{li{&.slick-active{display:block；}display:none；}
使用此SCS，我得到了要显示的正确项。工作得很好，谢谢！请确保在初始化光滑代码之前定义了初始化事件侦听器，否则它不会做任何事情。可以做$status.html（'+I+'/'+slick.slideCount+''）；如果你想设计分页方式！很棒的回答在这种情况下，你不能使用
slick.slideCount
info，但是可以通过
slick.dots[0]查看信息.children.length
。这是一个很好的更新此幻灯片的示例，最后一个非常好！想知道不包括克隆幻灯片在内的幻灯片的实际数量，slick.slideCount帮助了我。非常感谢这确实对我有效-但它在控制台中抛出了错误，说“UncaughtTypeError:无法读取null的“add”属性”也就是说，它两次呼叫slick：-(
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);
  }
});

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

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

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

Modifications are done to the new Slick version 1.7.1.

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

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

<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>

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

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