Search code examples
javascriptjquerycssjquery-eventsresponsive-slides

How to add play button inside responsive slide

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?

Solution

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