Bootstrap карусель с функцией Javascript для воспроизведения и паузы

Question

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

определение кнопки

     $(document).ready(function(){
            $("#mycarousel").carousel( { interval: 2000 } );
            $("#carouselButton").click(function()
            {
                if ($("#carouselButton").children("span").hasClass('fa-pause'))
                {
                    $("#mycarousel").carousel("pause");
                    $("#carouselButton").children("span").removeClass('fa-pause');
                    $("#carouselButton").children("span").addClass('fa-play');
                }
                else if ($("#carouselButton").children("span").hasClass('fa-play'))
                {
                    $("#mycarousel").carousel("cycle");
                    $("#carouselButton").children("span").removeClass('fa-play');
                    $("#carouselButton").children("span").addClass('fa-pause');                    
                }
            });
        });

Answer 1

Хороший вопрос. Я тоже не мог заставить { pause:null } работать так, как вы хотели. Но, покопавшись еще раз, я получил рабочее решение ...

• ключ переключает атрибут data-interval на carousel div
• , но это не дает l oop стартовал, чтобы запустить запуск ... нам нужно либо включать и выключать курсор вручную ... или автоматизировать его (что мы и сделали)
• , но поскольку есть некоторое отставание для добавления / удаляя этот атрибут на jQuery, мы (hacki sh -ly) добавляем setTimeout, чтобы позаботиться об этом

Working сниппет ниже:

$(document).ready(function() {

  $('#playPause').click(function() {
    if ($("#myCarousel").attr("data-interval")) {
      $("#myCarousel").removeAttr("data-interval");
      $(".carousel-item>.active").removeAttr("active");
      setTimeout(function() {
        $(".carousel-control-next").trigger('click');
        $(".carousel-inner").trigger('mouseenter');
        $("#myCarousel").trigger('mouseenter');
      }, 500);
    } else {
      $("#myCarousel").attr("data-interval", "500");
      setTimeout(function() {
        $(".carousel-control-next").trigger('click');
        $(".carousel-inner").trigger('mouseenter');
        $("#myCarousel").trigger('mouseenter');
        $("#myCarousel").trigger('mouseleave');
      }, 1000);
    }
  });

  // Enable Carousel Indicators
  $(".item1").click(function() {
    $("#myCarousel").carousel(0);
  });
  $(".item2").click(function() {
    $("#myCarousel").carousel(1);
  });
  $(".item3").click(function() {
    $("#myCarousel").carousel(2);
  });

  // Enable Carousel Controls
  $(".carousel-control-prev").click(function() {
    $("#myCarousel").carousel("prev");
  });
  $(".carousel-control-next").click(function() {
    $("#myCarousel").carousel("next");
  });
});

/* Make the image fully responsive */

.carousel-inner img {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container mt-3">
  <button type='button' id='playPause'>Play / Pause</button>

  <!-- The carousel -->
  <div id="myCarousel" class="carousel slide mt-4">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>