06-BXslider

01 BXslider

BXslider 공식문서

가장 유명한 jQuery 캐로셀 플러그인

파일다운로드

기본슬라이드

좌우컨트롤

멀티플

옵션활용

애니메이션 활용

동영상

<div class="slideWrap">
	<div class="video_slides">
		<div><video src="video/video.mp4"></video></div>
		<div><video src="video/video.mp4"></video></div>
		<div><video src="video/video.mp4"></video></div>
	</div>
</div>

.slideWrap{
    max-width: 960px;
    width:90%;
    margin:2em auto;
    position: relative;
}

$('.video_slides').bxSlider({
	video: true,
	onSliderLoad:function(currentIndex){
		$('.video_slides div').eq(currentIndex + 1).find('video').get(0).play();
	},
	onSlideAfter:function($slideElement){
		$slideElement.siblings().find('video').get(0).pause();
		$slideElement.find('video').get(0).play();
	}
});