Is there any way to stop auto-playing of bootstrap carousel slide?

Question

I'm making a carousel slide with Bootstrap carousel. I want to stop auto-playing of slides and I would like to make a button, which controls to toggle the auto-playing on/off.

I've searched about it already and it recommended me to add an attribute data-interval=false for the carousel div or to add a script: $('.carousel').carousel({ interval: false, }).

It stops auto-playing when the above values are set as default value but when I want to toggle the auto-playing on/off, it doesn't work and keeps auto-playing.

Here's the script I have so far:

var total = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.current_slide').html(currentIndex + ' / ' + total);

$('.carousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;

var text = currentIndex + ' / ' + total;
$('.current_slide').html(text);
});

function navAutoplay() {
    if ($('.if_paused').hasClass('carousel_now')) {
        $('*.carousel_now').removeClass('carousel_now');
        $('.if_started').addClass('carousel_now');
    }

    else {    
        $('*.carousel_now').removeClass('carousel_now');
        $('.if_paused').addClass('carousel_now');
    }
}

$(document).ready(function() {
    if ($('.if_started').hasClass('carousel_now')) {
        $('.carousel').carousel({
            interval: 7000
        });
    }

    else {
        $('.carousel').carousel({
            interval: false
        });
    }
})

The html code:

user_1032576 · Answer

Hi according to docs you should be able to toggle carusel using those methods:

.carousel('cycle')
// to enable cycling

.carousel('pause')
// to stop cycling thru items

I think if you call .carusel() with options object it initilizes it again and may not work as you expect

user_4778651 · Answer

You just have to read the docs from bootstrap, it's documented there.

Here's an example on how you would implement it.

function navAutoplay() {
  const isAutoPlayEnabled = $('#toggle-auto-play').text() === 'Pause';

  if (isAutoPlayEnabled) {
    // Pause carousel if autoplay is enabled
    $('#carouselExampleIndicators').carousel('pause');
    $('#toggle-auto-play').text('Auto Play');
  } else {
    // Enable Auto Play if it's paused
    $('#carouselExampleIndicators').carousel({
      interval: 500,  // Your choice of interval
    });
    $('#toggle-auto-play').text('Pause');
  }
}

user_15473263 · Answer

I've already tried .carousel('pause'); and .carousel('cycle'); to toggle the auto-playing, and it didn't work.

function navAutoplay() {
            if ($('.if_paused').hasClass('carousel_now')) {
                $('*.carousel_now').removeClass('carousel_now');
                $('.if_started').addClass('carousel_now');
                $('.carousel').carousel('cycle');
            }

            else {    
                $('*.carousel_now').removeClass('carousel_now');
                $('.if_paused').addClass('carousel_now');
                $('.carousel').carousel('pause');
            }
        }

Is there any way to stop auto-playing of bootstrap carousel slide?

3 Answers