Swiper中文论坛

标题: 滑动时，video视频，暂停播放，如何实现？ [打印本页]

---

作者: abin    时间: 2021-7-6 10:43
标题: 滑动时，video视频，暂停播放，如何实现？
请教大神，当左右滑动时，video视频，如何暂停播放？滑回到原来位置时，才播放。
  <!-- Swiper -->
<div class="swiper-container gallery-top2">
    <div class="swiper-wrapper">
            
      <div class="swiper-slide">  
              <img src="img/play2.png" class="play2" data="1">
              <img src="img/play.png" class="stop2"  data="1">
              <img src="img/music.png" class="music1" data="1">
              <img src="img/music2.png" class="music2" data="1">
<!--视频-->
   <video id="video1" class="video-js" >
            <source src="img/mp3.mp4" type="video/mp4">
           </video>
      </div>

      <div class="swiper-slide"><img src="img/gg2.jpg" class="open_show"></div>
      <div class="swiper-slide"><img src="img/gg3.jpg" class="open_show"></div>
      <div class="swiper-slide"><img src="img/gg4.jpg" class="open_show"></div>
      <div class="swiper-slide"><img src="img/gg5.jpg" class="open_show"></div>
        <div class="swiper-slide"><img src="img/gg6.jpg" class="open_show"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

                        </div>
                        <!---->
                          <div class="right swiper-container gallery-thumbs2">
    <ul class="swiper-wrapper">
                <li class="swiper-slide active"><img src="img/gg1.jpg"><span>视频</span></li>
      <li class="swiper-slide"><img src="img/gg2.jpg"></li>
      <li class="swiper-slide"><img src="img/gg3.jpg"></li>
      <li class="swiper-slide"><img src="img/gg4.jpg"></li>
      <li class="swiper-slide"><img src="img/gg5.jpg"></li>
        <li class="swiper-slide"><img src="img/gg6.jpg"></li>
                                </ul>
                                
                        </div>

                </div>
               
  <script>
      var galleryThumbs = new Swiper('.gallery-thumbs2', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
          direction: 'vertical',
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top2', {
      spaceBetween: 10,
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });

  </script>        
                <!---->

请教大神，当左右滑动时，video视频，如何暂停播放？滑回到原来位置时，才播放。

---

作者: kouyuxin    时间: 2023-8-12 09:01
同问啊，我也想要这个效果。

---

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)

Powered by Discuz! X3.2