본문 바로가기
퍼블리셔일기

스와이퍼 버튼 누르면 비디오 멈추기 swiper video stop pause

by 지짱히메 2022. 3. 3.
반응형

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video src="" muted></video>
        </div>
        <div class="swiper-slide">
          <video src="" preload="none" muted></video>
        </div>
        <div class="swiper-slide">
          <video src="" preload="none" muted></video>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

 

 

 

var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  on: {
    transitionStart: function(){
      
      var videos = document.querySelectorAll('video');

      Array.prototype.forEach.call(videos, function(video){
        video.pause();
      });
    },
    
    transitionEnd: function(){
      
      var activeIndex = this.activeIndex;
      var activeSlide = document.getElementsByClassName('swiper-slide')[activeIndex];
      var activeSlideVideo = activeSlide.getElementsByTagName('video')[0];
      activeSlideVideo.play();
    
    },
  
  }
})


 

 

반응형