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

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以上的光滑:

来自作者:在光滑的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)
  };
});

看看演示

对于波纹光滑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)
        };
    }
});

在这里查看演示,希望它有所帮助!