How to add play button inside responsive slide

Question

How to add play button inside responsive slide

1k views Asked by JohnMathew At 01 June 2019 at 08:40

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?

Original Q&A

There are 2 answers

Nico Diz On 01 June 2019 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>

**AudioBubble** · Accepted Answer · 2019-06-08T10:50:30+00:00

AudioBubble On 08 June 2019 at 10:50 BEST ANSWER

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

TechQA.

How to add play button inside responsive slide

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in JQUERY-EVENTS

Related Questions in RESPONSIVE-SLIDES

Popular Questions

Popular Tags

Trending Questions