slick.js插件实现监听video视频播放结束再自动轮播的代码

slick.js是常用的轮播图插件，监听video视频播放是常用的轮播模块效果。和SuperSlide.js插件、Swiper插件实现当前焦点有视频就暂停自动轮播，等视频播放结束再继续自动轮播的实现原理基本一样，就是先判断当前焦点是否有视频，如果有视频就调用暂停轮播的插件方法，使用addEventListener监听视频是否播放结束，然后再调用启用轮播的插件方法和立即播放下一屏的插件方法。

使用到的slick.js插件方法有：slickPause、slickPlay、slickNext；使用到的slick.js插件回调函数有：afterChange；使用到的js事件有：ended。

实现代码

var element = $('.your-element');
element.on('afterChange',function(){
	if(element.find('.slick-current video').length > 0){  
		element.slick('slickPause');       
		var _videoID = element.find('.slick-current video').attr('id');   //HTML里要给video标签添加id属性   
		var _videoObj = document.getElementById(_videoID);
		_videoObj.play();            
		_videoObj.addEventListener('ended', function(){
			element.slick('slickPlay');
			element.slick('slickNext');
		},false);
	}        
});
element.slick({
	autoplay:true,
	autoplaySpeed:5000,
	speed:1000,
	dots: true,
	arrows: true,
	vertical: false,
	slidesToShow: 1,
	slidesToScroll: 1,
	pauseOnHover:false
});   
if(element.find('.slick-current video').length > 0){  
	element.slick('slickPause');       
	var _videoID = element.find('.slick-current video').attr('id');
	var _videoObj = document.getElementById(_videoID);
	_videoObj.play();        
	_videoObj.addEventListener('ended', function(){
		element.slick('slickPlay');
		element.slick('slickNext');
	},false);
}

PS：实现原理基本支持所有带有相关回调函数以及能获取当前焦点图的jQuery轮播插件。

附：

Swiper幻灯片插件实现video视频播放结束再继续轮播的代码

SuperSlide.js插件实现当video视频播放完后再切换下一张