11

Is there a parameter to make the materialize carousel slider to auto play?

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

for example (this parameter doesn't work):

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

Thank you!

8 Answers 8

37

I resolved the problem with this:

$('.carousel').carousel({
    padding: 200    
});
autoplay();
function autoplay() {
    $('.carousel').carousel('next');
    setTimeout(autoplay, 4500);
}
1
  • 1
    setInterval(() => { $('.carousel').carousel('next'); }, 5000); Apr 8, 2021 at 10:59
19

Try executing next method like this

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

I resolved the problem with this code:

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

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

You can just listen to carousel onCycleTo event then reset/enabled the autoplay like this :

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

I had the same problem and I implement the same solution like you. I just added an other functionnality to restart the interval after clicking on the right or left arrow (button).

My right arrow has the class .fa-angle-right(fontawsome) and the left .fa-angle-left.

So My Carousel Call function looks like this:

$('.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);
 });
1

You could also prevent the carousel from sliding if the user is hovering it :

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

I am using materialize-css with Angular. And this is what I did to make it autoplay

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

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

auto-play with delay of 4 second .

function autoplay() {
 $('.carousel').carousel('next');
 setTimeout(autoplay, 4000);
}    
setTimeout(autoplay, 4000);
1
  • 1
    Duplicate to accepted answer. changing 4.5 seconds to 4 seconds does not yield a new answer. Jul 23, 2018 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.