我正在将Slick.js用于网站的视频部分。有一个主视频,然后是视频缩略图的导航。一切运转正常。但是,我想说的是,当视频1在轮播的主英雄部分中播放时,该视频的缩略图隐藏在缩略图导航部分中。
我尝试在光滑的滑块上检查活动的课程并基于此进行隐藏,但是缩略图未绑定到实际的主视频上
<!-- Main Video -->
* 2 examples although there are more videos
<div class='video--slider'>
<div>
<div style="position: relative; display: block; max-width:
960px;">
<div style="padding-top: 56.25%;">
<!--- change data-video-id # from brightcove to change the
video --->
<video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px;
bottom: 0px; left: 0px; width: 100%; height: 100%;">
</video>
</div>
</div>
</div>
<div>
<div style="position: relative; display: block; max-width:
960px;">
<div style="padding-top: 56.25%;">
<!--- change data-video-id # from brightcove to change the
video --->
<video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px;
bottom: 0px; left: 0px; width: 100%; height: 100%;">
</video>
</div>
</div>
</div>
</div>
<!--horizontal thumbnails -->
<div class='video--slider-nav'>
<div class="horizontal-scroll_thumbnail-container">
<div class="thumbnail-video--width" style="position: relative;
display: block;">
<div style="padding-top: 56.25%;">
<!--- change data-video-id # from brightcove to change the
video --->
<video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
</div>
</div>
</div>
<div class="horizontal-scroll_thumbnail-container">
<div class="thumbnail-video--width" style="position: relative;
display: block;">
<div style="padding-top: 56.25%;">
<!--- change data-video-id # from brightcove to change the video --->
<video data-video-id="" data-account="" data-player="" data-embed="default" data-application-id class="video-js" controls style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
</div>
</div>
</div>
$(document).ready(function() {
$('.video--slider').slick({
arrows: false,
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
$('.video--slider-nav > div').click(function() {
$('.video--slider').slick('slickGoTo', $(this).index());
});
});
隐藏主要视频部分中正在播放的视频的缩略图