Question

我正在将Slick插入网站。我有主页
使用光滑的幻灯片放映除了一件我无法弄清楚的事情。

我有2张幻灯片。他们从图像的幻影版本进展在所有图像中逐个淡入到图像的全分辨率详情。那时我希望最后一张图片停下来并留在那里。

滑块的标记为：

<div class="column-right slide">
    <div><img src="img/servicios/road.jpg" alt="Road"/></div>
    <div><img src="img/sobre_mi/map.jpg" alt="Map"/></div>
</div>

我认为无限：假会阻止它。实际发生的是什么图像淡入到完全（幻灯片1-2），然后淡出到幻影
（幻灯片2-1）不断。

要实施的代码是：

$('.slide').slick({
    autoplay: true,
    autoplaySpeed: 1000,
    dots: false,
    infinite: false,
    speed: 1000,
    fade: true,
    slide: 'div',
    cssEase: 'linear'
});

我是否遗漏了某些东西，误解了某些东西，或者这不是可能？似乎任何自动播放应该有一种播放方式（或者一个特定次数）

Answer 1

如果您希望滑块在到达最后一张幻灯片时停止，您可以使用自定义方法确定滑块的滑块编号，并从那里开始工作，如下：

找到滑块中的总项目（由于滑块从0开始计算滑块，因此将其减少1）
在每张幻灯片更改后运行自定义函数，如：
检查总项目编号是否等于滑块当前所在的最后一个幻灯片编号
如果这些数字相等，则暂停滑块或使用slickset选项将自动播放覆盖为false

<强>更新

对于1.4以上的光滑：

来自author：在光滑的1.4中，不推荐使用回调方法并将其替换为事件

所以基本上它是相同的想法，除了一些小的改变：

var item_length = $('.slide > div').length - 1;
var slider = $('.slide').slick({
    autoplay: true,
    autoplaySpeed: 1000,
    dots: false,
    infinite: false,
    speed: 1000,
    fade: true,
    slide: 'div',
    cssEase: 'linear'
});

// On before slide change
slider.on('afterChange', function(event, slick, currentSlide, nextSlide){
    //check the length of total items in .slide container
  //if that number is the same with the number of the last slider
  //Then pause the slider
  if( item_length === slider.slick('slickCurrentSlide') ){
    //this should do the same thing -> slider.slickPause();
    slider.slickSetOption("autoplay",false,false)
  };
});

查看demo

对于波纹光滑1.4

注意使用的js：

var item_length = $('.slide > div').length - 1;
var slider = $('.slide').slick({
    autoplay: true,
    autoplaySpeed: 1000,
    dots: false,
    infinite: false,
    speed: 1000,
    fade: true,
    slide: 'div',
    cssEase: 'linear',
    onAfterChange: function(){
        //check the length of total items in .slide container
        //if that number is the same with the number of the last slide
        //Then pause the slider
        if( item_length == slider.slickCurrentSlide() ){
            //this should do the same thing -> slider.slickPause();
            slider.slickSetOption("autoplay",false,false)
        };
    }
});

查看 demo here ，希望它有所帮助！

Answer 2

对我来说（Slick 1.5.8）@ Crispy-George解决方案不起作用。我必须使用以下代码：

var slider = $('.slide').slick({
    autoplay: true,
    autoplaySpeed: 1000,
    dots: false,
    infinite: false,
    speed: 1000,
    fade: true,
    slide: 'div',
    cssEase: 'linear'
});

// Here is most important part of the code which actually stops the slider
slider.on('afterChange', function(event, slick, currentSlide){
  // slick - is a slider object with a lot of useful info
  // currentSlide - is a current slide index (starts from 0)
  if( slick.slideCount === currentSlide + 1 ){
    slick.paused = true;
  }
});

更多文档：https://github.com/kenwheeler/slick（Events和Methods部分对此问题最有帮助）

光滑的旋转木马。想要自动播放一次播放幻灯片并停止播放

2 个答案: