光滑的旋转木马。想要自动播放一次播放幻灯片并停止 [英] Slick carousel. Want autoplay to play the slides once and stop

问题描述

我把Slick插入网站。我有主页

使用滑动幻灯片，除了一个我不能弄清楚的东西。

我有2张幻灯片。它们从映像的镜像版本

逐步渐进，到所有其

详细信息中的映像的完整分辨率。在这一点上，我想要最后的图像停止并留在那里。

滑块的标记为：

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

我想到infinite：false会阻止它。实际发生的情况是

图像逐渐变为完全（幻灯片1-2），然后逐渐淡出回到重影的

（幻灯片2-1）。

实现的代码是：

  $（'。slide'）。slick {
 autoplay：true，
 autoplaySpeed：1000，
 dots：false，
 infinite：false，
 speed：1000，
 fade：true，
 slide：'div'，
 cssEase：'linear'
}）; 
  

我错过了什么，误解了什么，或者这不是

吗？似乎任何自动播放都应该有一种播放方式（或

的特定次数）

解决方案

如果您希望滑块到达最后一张幻灯片时停止，您可以使用自定义方法确定滑块的幻灯片编号，然后按照下面的方式工作：

• 查找您在滑块中拥有的所有项目（并将滑块从0开始计数，将其减少1）


• 运行自定义函数


• 检查总项目数是否等于滑块目前开启的最后一个幻灯片编号


• 
  $ b

  更新

  
  
  

  对于高于1.4的滑块：

  
  

  作者：在slick 1.4中，回调方法已被弃用，并替换为事件

  
  

  所以基本上是一样的想法，除了一些细微的变化：

    var item_length = $（'。slide> div'）。 
   var slider = $（'。slide'）。slick（{
   autoplay：true，
   autoplaySpeed：1000，
   dots：false，
   infinite： 
   speed：1000，
   fade：true，
  幻灯片：'div'，
   cssEase：'linear'
  } 
   
   //在幻灯片改变之前
   slider.on（'afterChange'，function（event，slick，currentSlide，nextSlide）{
   //检查总项目的长度.slide container 
   //如果该数字与最后一个滑块的数字相同
   //然后暂停滑块
   if（item_length === slider.slick（'slickCurrentSlide'） ）{
   //这应该做同样的事情 - > slider.slickPause（）; 
   slider.slickSetOption（autoplay，false，false）
  }; 
  } ）; 
    

  查看 演示

  
  
  

  ---

  
  
  

  / strong>

  
  
  

  请注意所使用的js：

    var item_length = $（'。slide> div'）。length  -  1; 
   var slider = $（'。slide'）。slick（{
   autoplay：true，
   autoplaySpeed：1000，
   dots：false，
   infinite： 
   speed：1000，
   fade：true，
  幻灯片：'div'，
   cssEase：'linear'，
   onAfterChange：function（）{
   //检查.slide容器中的所有项目的长度
   //如果该数字与最后一张幻灯片的数字相同
   //然后暂停滑块
   if（item_length == slider.slickCurrentSlide（））{
   //这应该做同样的事情 - > slider.slickPause（）; 
   slider.slickSetOption（autoplay，false，false）
  }; 
  } 
  }）; 
    

  查看 演示这里 ，希望对您有所帮助！

  
  

  I am plugging Slick into a site. I have the home page
  working with a slick slide show except for one thing I can not figure out.

  I have 2 slides. They progress from a ghosted version of the image
  fading in one by one to a full resolution of the image in all its
  detail. At that point I want the last image to stop and stay there.

  The mark up for the slider is:

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

  I figured infinite: false would stop it. What actually happens is the
  image fades in to full (slides 1-2) and then fades back out to ghosted
  (slides 2-1) continuously.

  The code to implement is:

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

  Am I missing something, misunderstanding something or is this not
  possible? Seems any autoplay should have a way to play once (or a
  specific number of times)

  解决方案

  If you want the slider to stop when it reaches the last slide, you could use a custom method to determine on what slide number the slider is and work your way from there like bellow:

  • find the total items that you have in your slider (and decrease it by 1 since the slider counts its slides from 0 )
  • run a custom function after each slide is changed like:
  • check if the total items number is equal to the last slide number that the slider is currently on
  • if those numbers are equals, the pause the slider or use slicksetoption to overwrite the autoplay to false

  Update

  For slick above 1.4 vs:

  From the author: In slick 1.4, callback methods have been deprecated and replaced with events

  So basically it's the same idea, except a few minor changes:

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

  Check out the demo

  ---

  For bellow slick 1.4

  Note the js used:

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

  Check out the demo here and hope it helps!

  这篇关于光滑的旋转木马。想要自动播放一次播放幻灯片并停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！