Добавил swiper в цикл foreach чтоб каждый слайдер работал как отдельный. Но сейчас видео на событие slideChange воспроизводится только в первом слайдере. Возможно глупый вопрос, я просто изучаю js, пока не полностью понимаю как правильно написать.
document.querySelectorAll('.slider').forEach(s => {
new Swiper(s, {
loop: true,
direction: "horizontal",
slidesPerView: 1,
threshold: 5,
on: {
slideChange: function (swiper) {
let slideIndex = swiper.activeIndex;
let slideVideo = document.querySelectorAll('video');
slideVideo.forEach((el, index) => {
if(index === slideIndex) {
el.play();
} else {
el.pause();
el.currentTime = 0;
}
});
}
},
});
});
const modalTrigger = document.querySelectorAll('[data-slider]'),
modal = document.querySelectorAll('[data-target]');
modalTrigger.forEach(btn => {
btn.addEventListener('click', (e) => {
let modalIndex = e.currentTarget.getAttribute('data-slider');
let modalSlideIndex = e.currentTarget.getAttribute('data-slide-index');
let target = document.querySelector(`[data-target="${modalIndex}"]`);
if (target) {
let modalVideo = target.getElementsByTagName('video');
target.swiper.slideTo(`${modalSlideIndex}`);
setTimeout(() => {
target.classList.add('active');
modalVideo[modalSlideIndex].play();
}, "200")
}
});
});
.wrapper {
width: 200px;
overflow: hidden;
}
.slider {
margin-bottom: 20px;
&.active {
.swiper-slide {
background: red;
}
}
}
.swiper-slide {
background: blue;
color: #fff;
margin-bottom: 10px;
}
.swiper-slide video {
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.4/swiper-bundle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.4/swiper-bundle.min.js"></script>
<div class="wrapper">
<div class="slider" data-target="slider-breakfasts">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
<video preload="metadata" loop>
<source src="https://media.istockphoto.com/id/858021276/video/aerial-shot-of-10-110-interchange-los-angeles-at-sunset.mp4?s=mp4-640x640-is&k=20&c=6J8e4SlhfW0rIf93OFJZdtrTVA7PO210dI-5Bw8Cz0c=" type="video/mp4">
</video>
</div>
<div class="swiper-slide">
2
<video preload="metadata" loop>
<source src="https://media.istockphoto.com/id/858021276/video/aerial-shot-of-10-110-interchange-los-angeles-at-sunset.mp4?s=mp4-640x640-is&k=20&c=6J8e4SlhfW0rIf93OFJZdtrTVA7PO210dI-5Bw8Cz0c=" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="slider" data-target="slider-cold-appetizers">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
<video preload="metadata" loop>
<source src="https://media.istockphoto.com/id/858021276/video/aerial-shot-of-10-110-interchange-los-angeles-at-sunset.mp4?s=mp4-640x640-is&k=20&c=6J8e4SlhfW0rIf93OFJZdtrTVA7PO210dI-5Bw8Cz0c=" type="video/mp4">
</video>
</div>
<div class="swiper-slide">
2
<video preload="metadata" loop>
<source src="https://media.istockphoto.com/id/858021276/video/aerial-shot-of-10-110-interchange-los-angeles-at-sunset.mp4?s=mp4-640x640-is&k=20&c=6J8e4SlhfW0rIf93OFJZdtrTVA7PO210dI-5Bw8Cz0c=" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="slider" data-target="slider-salad">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
<video preload="metadata" loop>
<source src="https://media.istockphoto.com/id/858021276/video/aerial-shot-of-10-110-interchange-los-angeles-at-sunset.mp4?s=mp4-640x640-is&k=20&c=6J8e4SlhfW0rIf93OFJZdtrTVA7PO210dI-5Bw8Cz0c=" type="video/mp4">
</video>
</div>
<div class="swiper-slide">
2
<video preload="metadata" loop>
<source src="https://media.istockphoto.com/id/858021276/video/aerial-shot-of-10-110-interchange-los-angeles-at-sunset.mp4?s=mp4-640x640-is&k=20&c=6J8e4SlhfW0rIf93OFJZdtrTVA7PO210dI-5Bw8Cz0c=" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>