Я пытаюсь сделать swiper автоплей с несколькими видео. подскажите как останавливать виде если слайд не активен и запускать как только он активен? Я вроде разобрался, но при loop swiper делает дубликаты и на дубликаты он не вешает класс, по которому я останавливаю видео. Так же нужно что-бы слайд переключался только после того как закончится видео, а не по времени, которое устанавливается в swiper, тут я вообще не понимаю как сделать. Есть ли вообще такая функция? Спасибо!
<div class="main-home__slider swiper">
<div class="main-home__wrapper swiper-wrapper">
<div class="main-home__slide swiper-slide">
<video muted loop playsinline loading="lazy" class="vv" src="./files/videos/video.mp4">
<source loading="lazy" src="./files/videos/video.mp4" type="video/mp4">
</video>
</div>
<div class="main-home__slide swiper-slide">
<video muted loop playsinline loading="lazy" class="vv is-flipped"
src="./files/videos/video-2.mp4">
<source loading="lazy" src="./files/videos/video-2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
function vidik() {
const videos = document.querySelectorAll('.video');
videos.forEach(video => {
const videoSlider = video.classList.contains('.is-flipped');
if (videoSlider) {
video.pause();
} else {
video.play();
}
});
}
mainSlider.on('slideChange', function () {
//let activeIndex = mainSlider.contains.;
const swiperSlides = document.querySelectorAll('.video');
let video = document.querySelector(".swiper-slide-active .video");
video.currentTime = 0;
//console.log(video)
swiperSlides.forEach(function (item, index) {
console.log(activeIndex)
if (activeIndex == index) {
item.classList.add('is-flipped');
vidik();
} else {
item.classList.remove('is-flipped');
vidik();
}
});
});
