Как добавить кнопку воспроизведения внутри адаптивного слайда - PullRequest
Новая
       34

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

1 голос
/ 01 июня 2019

У меня есть набор изображений для отображения с использованием адаптивного слайда. Я нашел ссылку для создания адаптивного слайда: http://responsiveslides.com. Я не знаю, как добавить кнопку паузы / воспроизведения внутри слайда. Мой код выглядит следующим образом: 

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

Выше приведен исходный код. Как добавить кнопку паузы и воспроизведения в слайд?

Ответы [ 2 ]

1 голос
/ 01 июня 2019

Вам обязательно нужно использовать эту библиотеку или вы можете прослушать другой вариант?

Я рекомендую вам swiper .Это лучшая библиотека на мой взгляд.Вот ссылка для начала работы .

. В этом примере вы можете изменить значение логического значения autoplay с помощью методов start() (для автоматического воспроизведения ползунка) и stop() (сделать паузу).

Вот вам пример.Надеюсь, это поможет: 

$(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>
0 голосов
/ 08 июня 2019

Если вы можете использовать другой плагин. wow slider По умолчанию вы получите кнопки паузы и воспроизведения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...