Как играть в карусель bootstrap 4 при наведении мышки С отключенным автовоспроизведением при загрузке страницы?

Question

Я создал карусель с начальной загрузкой 4. Я прошел цикл при наведении на работу. Тем не менее, карусель автоматически воспроизводится при загрузке страницы. Есть ли в любом случае отключить автозапуск при загрузке страницы и сделать его первым слайдом, воспроизводимым только при наведении курсора мыши на него?

Кроме того, когда мышь уходит, она останавливается. Когда вы снова наведите курсор мыши, он начнет играть.

Я предоставил свой HTML и JS ниже.

Спасибо!

Я пытался добавить pause: true для JS. это просто останавливает всю карусель. Я также попытался ввести интервал данных: 200 в HTML и удалить его из JS. Однако это позволяет работать только в единственном цикле и паузе, и не работает, когда я перемещаю мышь на карусель и оставляю ее.

     <div id="carouselWork" class="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="Work/Posters/1.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/2.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/3.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/4.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/5.jpg" style="width:100%;">
        </div>
      </div>
    </div>



$(document).ready(function() {

$('.carousel').carousel({
  interval: 200
})

$('#carouselWork').hover(function(){
   $(".carousel").carousel('cycle');
},function(){
   $(".carousel").carousel('pause');
});
});

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

Фактически: работает функция воспроизведения / приостановки при наведении, но карусель автоматически воспроизводится с интервалом 200 при загрузке страницы.

Answer 1

для этого нужно использовать data-* свойство, в HTML добавьте

Данные-пауза = "истина"

Итак, теперь вы можете приостановить интервал при запуске.

для включения автозапуска при mouseEnter и отключения автозапуска при mouseLeave, вы можете использовать метод .on в Jquery

$(".carousel").on("mouseenter",function() {
  $(this).carousel('cycle');
}).on("mouseleave", function() {
  $(this).carousel('pause');
});

для управления интервалом между функциями мыши и выхода из мыши, вы можете снова использовать свойство HTML data- *

данные интервал = "200"

ЖИВОЙ СНЕПЕТ

$(".carousel").on("mouseenter",function() {
  $(this).carousel('cycle');
}).on("mouseleave", function() {
  $(this).carousel('pause');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div id="carouselWork" class="carousel slide bg-dark" data-pause="true" data-interval="200">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1920/720/?image=1" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=10" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=20" class="d-block w-100" alt="">
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>