How to add play button inside responsive slide

Question

I have a set of images to display using a responsive slide. I found a link to create responsive slide: http://responsiveslides.com. I don't know to add pause/play button inside the slide. My code is as follows:

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

The above is the source code. How can I add pause and play button into my slide?

score 1 · Answer 1 · answered Jun 01 '19 at 19:14

Do you necessarily have to use that library or can you listen to another option?

I recommend you swiper. It is a better library in my opinion. Here is the get-started link.

In this example you can change the value of the boolean autoplay with methods start() (to autoplay the slider) and stop() (to pause it).

Here you have an example. Hope it helps:

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

thank you @Nico Diz , But how to add previous and next button here — JohnMathew, Jun 03 '19 at 06:28
According to the guide (https://idangero.us/swiper/get-started/), you should add in the HTML:
And in the JS, inside the new Swiper block, add the folowong prop: navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } — Nico Diz, Jun 03 '19 at 14:32

score 0 · Accepted Answer · answered Jun 08 '19 at 10:50

0

If you can use another plug-in. wow slider You will get by default pause and play buttons.

answered Jun 08 '19 at 10:50

How to add play button inside responsive slide

2 Answers2