0

Добавил 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>

1 ответ 1

0

Для этого ты должен брать видео из каждого слайдера по отдельности. Если хочешь запускать их по индексу. Проблема была в том что ты берешь все видео на странице и запускаешь их по индексу текущего слайда. (Видео ведь девять а в каждом слайдере их по 3 то есть чтобы запустить видео из другого слайдера тебе нужно узнать его индекс). Лучше если хочешь делать это твоим способом выбрать только те видео которые есть в определенном слайдере.

  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 = s.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.