我有一个使用flickity carousel 库创建的视频轮播,可以在 codepen 上看到。我想要发生的是,当用户滑动轮播时,所选幻灯片停止播放,然后采用所选中间位置的幻灯片开始播放。现在,使用 jQuery,我得到了最初播放的选定幻灯片:
$(document).ready(function () {
var $partnerSlides = $('.partner-slides').flickity();
function onLoadeddata(event) {
var cell = $partnerSlides.flickity('getParentCell', event.target);
$partnerSlides.flickity('cellSizeChange', cell && cell.element);
}
$partnerSlides.find('.slide video').each(function (i, video) {
video.pause();
$(video).on('durationchange', onLoadeddata);
});
$partnerSlides.find('.slide.is-selected video').each(function (i, video) {
video.play();
$(video).on('durationchange', onLoadeddata);
});
});
但是当幻灯片切换位置时,选定的幻灯片只是移动位置并继续播放,而新幻灯片处于中间位置并且不播放。
每次轮播滑动时有没有办法更新这些功能?