Materialize Carousel Slider autoplay

Question

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!

Leandro Soriano · Accepted Answer · 2018-10-12T20:17:02.433

36

I resolved the problem with this:

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

edited Oct 12 '18 at 20:17

answered Apr 12 '16 at 19:39

Leandro Soriano

669
1
6
14

1

setInterval(() => { $('.carousel').carousel('next'); }, 5000); – Alexey Kolotsey Apr 08 '21 at 10:59

score 19 · Answer 2 · answered Dec 16 '16 at 11:41

19

Try executing next method like this

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

answered Dec 16 '16 at 11:41

Whip

1,891
22
43

score 2 · Answer 3 · edited Jun 19 '18 at 10:50

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

edited Jun 19 '18 at 10:50

4b0

21,981
30
95
142

answered Feb 10 '17 at 04:25

Hugo Gutierrez

57
6

score 1 · Answer 4 · edited Jun 19 '18 at 10:52

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

score 1 · Answer 5 · answered Apr 03 '17 at 15:25

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

score 1 · Answer 6 · edited Aug 20 '20 at 08:55

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

score 0 · Answer 7 · answered Mar 22 '20 at 06:07

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)

score -1 · Answer 8 · edited Jun 19 '18 at 10:50

-1

auto-play with delay of 4 second .

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

edited Jun 19 '18 at 10:50

4b0

21,981
30
95
142

answered May 31 '18 at 09:58

Vin S

145
1
4

1

Duplicate to accepted answer. changing 4.5 seconds to 4 seconds does not yield a new answer. – Munim Munna Jul 23 '18 at 16:16

Materialize Carousel Slider autoplay

8 Answers8