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

Question

[jack iakovenko]

всем привет.учусь верастать по видео с ютуба
так вот сверстал страницу на которой два слайдера и оба работают но в обеих слайдерах есть как картинки так и видео
автор ролика добавил клик на видо в 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>

зарание всем спасибо

Comments

[Ankhena]

Стили бы...
А ещё лучше песочницу на jsfiddle.net

Думаю, что это потому что кнопка 0х0 или провалилась без z-index или типа того.

[jack iakovenko]

Ankhena, на странице сами кнопики видны но в js как заставить заработать видео при клик на воспроизведение видео это не понимаю
попробую тут стили закинуть
вот стили первого слайдера в котором все работает

.main-slider {
	overflow: hidden;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	line-height: 1;
	font-size: 0;
    margin: 0;
}
.main-slider__media {
    width: 502px;
    height: 280px;
    margin: 0;
}

.main-slider__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 41px;
	background-image: url("../../img/icons/play.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 50;
}

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

.slider-container {
    overflow-x: hidden;
    width: 100%;
    padding: 100px 0;
    margin-top: 50px;
    
}
.slider-container .swiper-slide {
	position: relative;
	border-radius: 8px;
	min-height: 550px;
	width: 890px;
	transition: transform 0.3s;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.slider-container .swiper-slide::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 50%, rgba(0, 0, 0, 0.461617) 100%);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}
.slider-container .swiper-slide-active {
    transform: scaleX(1.16) scaleY(1.2);
    transition: transform 0.3s;
}

.slider-container .swiper-slide-active::after {
    opacity: 1;
    transition: opacity 0.3s;
}

.slider-title {
	font-weight: 700;
	font-size: 28px;
	color: var(--white-color);
	position: relative;
	z-index: 5;
	padding-left: 35px;
	padding-bottom: 30px;
	transition: transform 0.3s;
	transform: translateY(200px);
}

.swiper-slide-active .slider-title {
    transition: transform 0.5s;
    transform: translateY(0);
}
.video-slider__play {
    position: absolute;
    width: 112px;
    height: 112px;
    top: 39px;
    left: 48px;
    background-image: url(../../img/icons/Video\ Icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 50;

}

.swiper-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[Ankhena]

jack iakovenko, вы запутали меня. Проблема со слайдером или с тем, что вы не умеете воспроизводить видео по кнопке?

https://html.spec.whatwg.org/#playing-the-media-re...

[jack iakovenko]

Ankhena, у меня проблема с js
там слайдер через main-slider__media и видео видет клик main-slider__play работает соответсвенно и видео а вот что прописать для второго слайдера video-slider__media чтобы клик video-slider__play и видео воспроизвелось

[Ankhena]

<video id="video">
<source src="video.mp4" type="video/mp4">
</video>

<button type="button" id="btn-play">Click Play</button >

const btnPlay = document.querySelector('#btn-play');
const video = document.querySelector('video');

btnPlay .addEventListener('click', () => video .play());

типа того

[jack iakovenko]

Ankhena, скопировал вставил но увы не работает.кликаю на кнопку а она не воспроизводит видео