Добавить кнопку Play/Pause для загрузки карусели

Я прочитал почти все темы, относящиеся к карусели бутстрапа, но не нашел ответа на мой вопрос. Я добавил две кнопки управления (воспроизведение/пауза) на карусель, но каждая кнопка запускает функцию со стандартного/первого слайда. Я хотел бы иметь возможность приостанавливать текущий слайд и играть с текущего слайда всякий раз, когда происходит событие клика.

Вот мой код:

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

        $('#playButton').click(function () {
            $('#homeCarousel').carousel('cycle');
        });
        $('#pauseButton').click(function () {
            $('#homeCarousel').carousel('pause');
        });
    });

</script>

И два элемента управления:

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

Ответ 1

Это должно работать. Я бы удостоверился, что ваши события щелчка стреляют, как вы ожидаете, потому что некоторые элементы карусели бутстрапа могут отображаться над вашими элементами и предотвращать клики.

Если вы добавили следующие элементы управления в HTML:

<div id="carouselButtons">
    <button id="playButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-play"></span>
     </button>
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-pause"></span>
    </button>
</div>

Затем следующий JavaScript должен управлять запуском и остановкой в любом фрейме:

$('#playButton').click(function () {
    $('#homeCarousel').carousel('cycle');
});
$('#pauseButton').click(function () {
    $('#homeCarousel').carousel('pause');
});

Как и в моем первом пункте, чтобы заставить их правильно отображаться внутри карусели, вы можете создать группу кнопок со следующими CSS:

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    bottom: 0px;
}

Рабочая демонстрация в jsFiddle

Для того, чтобы эта функция имела наибольший смысл, вы, вероятно, хотите, чтобы карусель продолжала двигаться, даже когда она зависала над ним (иначе после выбора воспроизведения поведение на велосипеде не запустится до тех пор, пока вы не переместите мышь).

В соответствии с карусельными документами:

Вариант - пауза
По умолчанию - "hover" - приостанавливает циклирование карусели в центре мыши и возобновляет циклирование карусели на мышиной оси.

Вместо этого убедитесь, что вы отключили это при инициализации карусели следующим образом:

$('#homeCarousel').carousel({
    interval:2000,
    pause: "false"
});

Ответ 2

Для тех, кто хочет, чтобы кнопки воспроизведения/паузы выключались. Пример jsFiddle

JavaScript:

 $("button").click(function() {
  if ($(this).attr("id") === "pauseButton") {
    $('#homeCarousel').carousel('pause');
    $(this).attr("id", "playButton");
    $("span", this).toggleClass("glyphicon-play glyphicon-pause");
  } else {
    $('#homeCarousel').carousel('cycle');
    $(this).attr("id", "pauseButton");
    $("span", this).toggleClass("glyphicon-pause glyphicon-play");
  }
});

HTML:

<div id="carouselButtons">
    <button id="pauseButton" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-pause"></span>
    </button>
  </div>

Ответ 3

Это был мой подход. Вы можете стилизовать класс .pause и .play, но вы считаете нужным, но я просто использую простой текст для демонстрационных целей:

$('.carousel-control.pause').click(function() {
        var controls = $(this);
        if (controls.hasClass('pause')) {
            controls.text('Resume').removeClass('pause').toggleClass('play');
            $('#myCarousel').carousel('pause');
        } else {
            controls.text('Pause').removeClass('play').toggleClass('pause');
            $('#myCarousel').carousel('cycle');
        }
    });

Вот ваш детонатор

<a class="carousel-control pause" href="javascript:void(0);">Pause</a>