web-dev-qa-db-ja.com

カルーセルスライダーの自動再生をマテリアライズする

マテリアライズカルーセルスライダーを自動再生するパラメーターはありますか？

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

たとえば（このパラメーターは機能しません）：

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

ありがとうございました！

jquerymaterialize
7
Leandro Soriano

私はこれで問題を解決しました：

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

このようにnextメソッドを実行してみてください

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

私は同じ問題を抱えており、私はあなたと同じ解決策を実装します。右または左の矢印（ボタン）をクリックした後に間隔を再開するために、他の機能を追加しました。

私の右矢印は、クラス.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);
 });
2
Nestor Segura

カルーセル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");
  }
}
1
Aldric

ユーザーがカルーセルにカーソルを合わせている場合、カルーセルがスライドするのを防ぐこともできます。

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