在 navslide 中的滚动或点击或视频上暂停光滑的滑块

Question

这是我的代码，我不知道如何在 next/prev 按钮上或当我点击导航栏中的滑块图像缩略图时暂停视频：

HTML :

<div class="project-videos">
    <div><video controls poster="Image/video_posts/post1.jpg"> <source src="videos/videom.mp4"></video></div>
    <div><video controls poster="Image/video_posts/post2.jpg"> <source src="videos/video2.mp4"></video></div>
    <div><video controls poster="Image/video_posts/post3.jpg"> <source src="videos/video3.mp4"></video></div>
    <div><video controls poster="Image/video_posts/post4.jpg"> <source src="videos/video4.mp4"></video></div>
  </div>

  
  <div class="project-videos-nav"> 
      <div><video poster="Image/video_posts/post1.jpg"> <source src="videos/videom.mp4"></video></div>
      <div><video poster="Image/video_posts/post2.jpg"> <source src="videos/video2.mp4"></video></div>
      <div><video poster="Image/video_posts/post3.jpg"> <source src="videos/video3.mp4"></video></div>
      <div><video poster="Image/video_posts/post4.jpg"> <source src="videos/video4.mp4"></video></div>
  </div>

JavaScript

function projectVideos(){
    $('.project-videos').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.project-videos-nav',
      });

      $('.project-videos-nav').slick({
        slidesToShow: 3,
        infinite:true,
        slidesToScroll: 1,
        asNavFor: '.project-videos',
        dots: false,
        nextArrow : '<button><i class="fas fa-arrow-square-right"></i></button>',
        prevArrow : '<button><i class="fas fa-arrow-square-left"></i></button>',
        focusOnSelect: true,
      });
    }

Answer 1

您可以使用 beforeChange 或 afterChange 事件来检测幻灯片更改，然后轻松触发 play/pause 任何视频

只需将您在任何给定幻灯片中的视频作为

<div class="project-videos">
    <div><video id="video0" controls poster="Image/video_posts/post1.jpg"> <source src="videos/videom.mp4"></video></div>
    <div><video id="video1" controls poster="Image/video_posts/post2.jpg"> <source src="videos/video2.mp4"></video></div>
    <div><video id="video2" controls poster="Image/video_posts/post3.jpg"> <source src="videos/video3.mp4"></video></div>
    <div><video id="video3" controls poster="Image/video_posts/post4.jpg"> <source src="videos/video4.mp4"></video></div>
</div>

那你js

$('.project-videos') .on('beforeChange', function(event, slick, currentSlide, nextSlide){
    
    // this will run before slide happens to change; so assuming you have 4 slides
    console.log(currentSlide); // this will be the current slide number 0 - 1 - 2 - 3 
    console.log(nextSlide); // this will be the upcoming slide number  1 - 2 - 3 - 0
 
    $('#video'+currentSlide)[0].pause();
    //pause current

    $('#video'+nextSlide)[0].play();
    //play upcoming
});

这就是我的意思：https://codepen.io/vsk/pen/mdVqQNw

在 navslide 中的滚动或点击或视频上暂停光滑的滑块

Pause slick slider on scroll or clicking or video in navslide

javascript

html

jquery

slick.js