Как добавить функцию паузы и воспроизведения на адаптивный слайд - PullRequest
Новая
       39

Как добавить функцию паузы и воспроизведения на адаптивный слайд

0 голосов
/ 31 мая 2019

Мне нужно добавить слайд в свой проект с функциями паузы и воспроизведения. Я не могу найти код для функции паузы и воспроизведения. Почему это не работает. 

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

    // You can also use "$(window).load(function() {"
    $(function () {
        restartCycle = function () {
            if (settings.auto) {
                // Stop
                clearInterval(rotate);
                if (!forcePause) // new line
                    // Restart
                    startCycle();
            }
        };
        $('.pause_slider').click(function (e) {
            e.preventDefault();
            forcePause = true;
            $(this).hide()
            $('.play_slider').show();
            clearInterval(rotate);
        });

        $('.play_slider').click(function (e) {
            e.preventDefault();
            forcePause = false;
            $(this).hide();
            $('.pause_slider').show();
            restartCycle();
        });

      // Slideshow 4
      $("#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>

Я хочу иметь опцию пуска / остановки, чтобы контролировать, будет ли слайдер автоматически переключаться между слайдами или приостанавливаться, предоставляя пользователю немного больше контроля. Спасибо,

...