如何在响应式幻灯片中添加播放按钮

Question

我有一组图像要使用响应式幻灯片显示。我找到了一个 link 来创建响应式幻灯片：http://responsiveslides.com。我不知道在幻灯片中添加 pause/play 按钮。我的代码如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="../responsiveslides.min.js"></script>
  <script>

      $("#slider4").responsiveSlides({
        auto: true,
        pager: false,
        pauseControls:true,
        nav: true,
        pause: false,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });
  </script>
</head>
<body>
  <div id="wrapper">
      <a class="pause_slider" href="#">Pause Slider</a>
      <a class="play_slider" href="#">Play Slider</a>


    <div class="callbacks_container">
      <ul class="rslides" id="slider4">
        <li>
          <img src="images/1.jpg" alt="">
          <p class="caption">This is a caption</p>
        </li>
        <li>
          <img src="images/2.jpg" alt="">
          <p class="caption">This is another caption</p>
        </li>
        <li>
          <img src="images/3.jpg" alt="">
          <p class="caption">The third caption</p>
        </li>
      </ul>
    </div>

以上为源码。如何在我的幻灯片中添加暂停和播放按钮？

Answer 1

您一定要使用那个库还是可以听另一个选项？

我推荐你swiper. It is a better library in my opinion. Here is the get-started link。

在此示例中，您可以使用方法 start()（自动播放滑块）和 stop()（暂停它）来更改布尔值 autoplay 的值。

这里有一个例子。希望对您有所帮助：

$(document).ready(function() {
 new Swiper('.swiper-container', {
  speed: 600,
  spaceBetween: 90,
  autoplay: true,
  disableOnInteraction: true,
  loop: true
 });
 const mySwiper = document.querySelector('.swiper-container').swiper;
 let isSliderActive = true;

 $("#slider-control").click(function() {
  if (isSliderActive) {
   mySwiper.autoplay.stop();
   isSliderActive = false;
   this.innerHTML = 'PLAY';
   console.log('slider stopped');
  } else {
   mySwiper.autoplay.start();
   isSliderActive = true;
   this.innerHTML = 'PAUSE';
   console.log('slider activated');
  }
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" />
<style>
 .swiper-slide { text-align: center; }
</style>

<div class="swiper-container">
  <!-- required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
  <img src="https://place-hold.it/100x100">
  <div>Slide 1</div>
 </div>
    <div class="swiper-slide">
  <img src="https://place-hold.it/100x100">
  <div>Slide 2</div>
 </div>
    <div class="swiper-slide">
  <img src="https://place-hold.it/100x100">
  <div>Slide 3</div>
    </div>
  </div>
</div>
<button id="slider-control">PAUSE</button>

Answer 2

如果你可以使用另一个plug-in。 wow slider 默认情况下，您将获得暂停和播放按钮。

如何在响应式幻灯片中添加播放按钮

How to add play button inside responsive slide

javascript

css

jquery

responsive-slides

jquery-events