Materialise Carousel Slider 自动播放答案

【问题标题】：Materialize Carousel Slider autoplayMaterialise Carousel Slider 自动播放
【发布时间】：2016-04-12 18:41:56
【问题描述】：

是否有参数可以让物化轮播滑块自动播放？

$('.carousel').carousel();

例如（这个参数不起作用）：

$('.carousel').carousel({
   autoplay: true
});

谢谢！

【问题讨论】：

标签： jquery materialize

【解决方案1】：

我解决了这个问题：

$('.carousel').carousel({
    padding: 200    
});
autoplay();
function autoplay() {
    $('.carousel').carousel('next');
    setTimeout(autoplay, 4500);
}

【讨论】：

setInterval(() => { $('.carousel').carousel('next'); }, 5000);

【解决方案2】：

尝试像这样执行next方法

  $('.carousel').carousel();
  setInterval(function() {
    $('.carousel').carousel('next');
  }, 2000); // every 2 seconds

【讨论】：

【解决方案3】：

我用这段代码解决了问题：

$('.carousel.carousel-slider').carousel({
   fullWidth: true,
   padding: 200
 }, setTimeout(autoplay, 4500));

 function autoplay() {
   $('.carousel').carousel('next');
   setTimeout(autoplay, 4500);
 }

【讨论】：

【解决方案4】：

您可以只听轮播 onCycleTo 事件，然后像这样重置/启用自动播放：

var carousel = jQuery('div#home-carousel');
    carousel.carousel({
      fullWidth: true,
      indicators: true,
      duration: 300,
      onCycleTo : function($current_item, dragged) {
        console.log($current_item);
        stopAutoplay();
        startAutoplay(carousel);
      }
    });

var autoplay_id;
function startAutoplay($carousel) {
   autoplay_id = setInterval(function() {
      $carousel.carousel('next');
    }, 5000); // every 5 seconds
  //console.log("starting autoplay");
}

function stopAutoplay() {
  if(autoplay_id) {
    clearInterval(autoplay_id);
    //console.log("stoping autoplay");
  }
}

【讨论】：

【解决方案5】：

我遇到了同样的问题，我实施了和你一样的解决方案。我刚刚添加了一个其他功能，可以在单击向右或向左箭头（按钮）后重新启动间隔。

我的右箭头有 .fa-angle-right(fontawsome) 类和左 .fa-angle-left 类。

所以我的轮播调用函数如下所示：

$('.carousel').carousel({
   full_width: true,
   time_constant: 100
 });

 var carouselAutoplay = setInterval(function() {
   $('.fa-angle-right').click();
 }, 7000);

 $('.fa-angle-right').click(function() {
   $('.carousel').carousel('next');
   clearInterval(carouselAutoplay);
   carouselAutoplay = setInterval(function() {
     $('.fa-angle-right').click();
   }, 7000);
 });
 $('.fa-angle-left').click(function() {
   $('.carousel').carousel('prev');
   clearInterval(carouselAutoplay);
   carouselAutoplay = setInterval(function() {
     $('.fa-angle-right').click();
   }, 7000);
 });

【讨论】：

【解决方案6】：

如果用户将其悬停，您还可以防止轮播滑动：

$('.carousel.carousel-slider').carousel({
    fullWidth: true,
    indicators: true
});

var autoplay = true;

setInterval(function() { 
    if(autoplay) $('.carousel.carousel-slider').carousel('next');
}, 4500);

$('.carousel.carousel-slider').hover(function(){ 
     autoplay = false; 
}, function(){ 
     autoplay = true; 
});

【讨论】：

【解决方案7】：

我正在使用 materialize-css 和 Angular。这就是我所做的让它自动播放

let iCarousel = new M.Carousel(this.elCarousel.nativeElement, {
      fullWidth: true,
      indicators: true
});

// this did the trick
setInterval(() => {
   iCarousel.next();
}, 2000)

【讨论】：

【解决方案8】：

auto-play 延迟 4 秒。

function autoplay() {
 $('.carousel').carousel('next');
 setTimeout(autoplay, 4000);
}    
setTimeout(autoplay, 4000);

【讨论】：

复制到接受的答案。将 4.5 秒更改为 4 秒不会产生新的答案。