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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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