Добавить кнопку «Воспроизведение/Пауза» для загрузки карусели

Question

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

Вот мой код:

<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> 

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

Working Demo in jsFiddle

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

Согласно carousel docs:

Опция - пауза
По умолчанию - "парить" - Приостановка круговорот карусели на MouseEnter и возобновляет круговорот карусели на MouseLeave.

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

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

Answer 2

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

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> 

Answer 3

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

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