jumberi
@jumberi

Как заставить работать 2 слайдера swiper на странице?

всем привет.учусь верастать по видео с ютуба
так вот сверстал страницу на которой два слайдера и оба работают но в обеих слайдерах есть как картинки так и видео
автор ролика добавил клик на видо в js для одного слайдера а для второго я сам точно также сделал но приписал классы второго слайдера так вот клик не работает но знаю почему может поможете?
вот код первого слайда на котором работает и клик и видео
<div class="swiper-slide">
	 <div class="main-slider__media">
		 <button class="main-slider__play btn-reset"></button>
		 <video src="./videos/video-1.mp4" controls poster="./videos/video-1.jpg" muted playsinline></video>
	 </div>
	 <p class="main-slider__text">
		wonderful moutain
	 </p>
  </div>


вот js код

const swiper1 = document.querySelector('.slider-container'),
			swiper2 = document.querySelector('.swiper-container'),
			burger = document.querySelector('.burger'),
			close = document.querySelector('.menu__close'),
			menu = document.querySelector('.menu'),
			playButtonsFirst = document.querySelectorAll('.main-slider__play ');

let swiperSlider1 = new Swiper(swiper1, {
	centeredSlides: true,
	slidesPerView: 'auto',
	loop: true,
	spaceBetween: 105,
});

let swiperSlider2 = new Swiper(swiper2, {
	centeredSlides: true,
	slidesPerView: 1,
	loop: true,
	spaceBetween: 10,
	fadeEffect: {
		crossFade: true
	},
	effect: 'fade',
	navigation: {
		nextEl: '.btn-right',
		prevEl: '.btn-left',
	},
});

swiperSlider2.on('transitionEnd', function () {
	let videos = document.querySelectorAll('.first__slider video');
	videos.forEach((el) => {
		el.pause();
		el.currentTime = 0;
	});
	playButtonsFirst.forEach((el) => {
		el.style.display = 'block';
	});
});

playButtonsFirst.forEach((el) => {
	el.addEventListener('click', (e) => {
		let video = e.currentTarget.closest('.main-slider__media').querySelector('video');
		video.play();
		e.currentTarget.style.display = 'none';
		setTimeout(() => {
			video.volume = 0.5;
		}, 1000);
	});
});


а вот второй слайд на котором хочу добавит клик на кнопку и воспроизвести видео
<div class="swiper-slide">
	  <div class="video-slider__media">
		  <button class="btn-reset video-slider__play"></button>
		  <h3 class="slider-title">A Guide To Rocky Mountain Vacations</h3>
		  <video src="./videos/video-1.mp4" poster="./videos/video-1.jpg"></video>
	  </div>
  </div>


зарание всем спасибо
  • Вопрос задан
  • 187 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы