web-dev-qa-db-fra.com

Matériel de lecture automatique de curseur carrousel

Existe-t-il un paramètre permettant au curseur de carrousel de se matérialiser de jouer automatiquement?

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

par exemple (ce paramètre ne fonctionne pas):

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

Je vous remercie!

jquerymaterialize
7
Leandro Soriano

J'ai résolu le problème avec ceci:

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

Essayez d’exécuter la méthode next comme ceci

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

J'ai eu le même problème et j'implémente la même solution que vous. Je viens d'ajouter une autre fonctionnalité pour relancer l'intervalle après avoir cliqué sur la flèche droite ou gauche (bouton).

Ma flèche droite a la classe .fa-angle-right (fontawsome) et la gauche .fa-angle-left. 

Donc, la fonction Mon appel carrousel ressemble à ceci: 

$('.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

Vous pouvez simplement écouter le carrousel onCycleTo event puis réinitialiser/activer la lecture automatique comme ceci: 

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

Vous pouvez également empêcher le carrousel de glisser si l'utilisateur le survole:

$('.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