jquery.bxslider.jsを使ったサンプルいろいろ

jquery.bxslider.jsの設定方法を色々と試してみます。
基本的な使い方は、以前書いた記事「jquery.bxslider.jsの使い方やオプションなどのまとめ」をご確認ください。

特にオプション設定をしない場合

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>

JavaScript

$(function() {
	$('#sample').bxSlider();
});

特にオプション設定をしない場合のデモページ
特にオプション設定をしなかった場合、左右への移動とページ送りが表示されます。
　

フェードでの切り替え

JavaScript

$(function() {
	$('#sample').bxSlider({
		mode: 'fade'
	});
});

フェードでの切り替えのデモページ
　

縦方向へのスライド

JavaScript

$(function() {
	$('#sample').bxSlider({
		mode: 'vertical'
	});
});

縦方向へのスライドのデモページ
　

1枚目以外の画像を最初に表示する

JavaScript

$(function() {
	$('#sample').bxSlider({
		startSlide: 2
	});
});

1枚目以外の画像を最初に表示するデモページ
　

最初に表示する画像をランダムにする

JavaScript

$(function() {
	$('#sample').bxSlider({
		randomStart: true
	});
});

最初に表示する画像をランダムにするデモページ
　

スライダーをループさせないようにする

JavaScript

$(function() {
	$('#sample').bxSlider({
		infiniteLoop: false,
		hideControlOnEnd: true
	});
});

スライダーをループさせないようにするデモページ
　

キャプションを設定する

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" title="キャプション1" /></li>
	<li><img src="img/img02.jpg" title="キャプション2" /></li>
	<li><img src="img/img03.jpg" title="キャプション3" /></li>
	<li><img src="img/img04.jpg" title="キャプション4" /></li>
	<li><img src="img/img05.jpg" title="キャプション5" /></li>
</ul>

JavaScript

$(function() {
	$('#sample').bxSlider({
		captions: true
	});
});

キャプションを設定するデモページ
　

画像の高さが異なる場合に、スライダーの高さを自動調整する

JavaScript

$(function() {
	$('#sample').bxSlider({
		adaptiveHeight: true
	});
});

画像の高さが異なる場合に、スライダーの高さを自動調整するデモページ
オプションを設定していない場合、このような表示になります。
　

レスポンシブに対応させない

JavaScript

$(function() {
	$('#sample').bxSlider({
		responsive: false
	});
});

レスポンシブに対応させないデモページ
　

ニュースティッカーモードで表示する

JavaScript

$(function() {
	$('#sample').bxSlider({
		ticker: true,
		minSlides: 2,
		maxSlides: 3,
		slideWidth: 320,
		slideMargin: 10,
		tickerHover: true,
		speed: 30000
	});
});

ニュースティッカーモードで表示するデモページ
スライドの速度はspeedで設定しますが、スライダーが一周する時間になるのでスライドの枚数によって速度が変わってしまいます。
ニュースティッカーモードで枚数が多い場合のデモページ
　

スライド枚数が違っても速度を一定にしてみます。

JavaScript

$(function() {
	var slideSpeed = 3000;
	var slideLength = $('#sample li').length;
	$('#sample').bxSlider({
		ticker: true,
		minSlides: 2,
		maxSlides: 3,
		slideWidth: 320,
		slideMargin: 10,
		tickerHover: true,
		speed: slideSpeed * slideLength
	});
});

ニュースティッカーモードでスピードを調整するデモページ
ニュースティッカーモードでスピードを調整するデモページ2
　

ページ送りの表示を変更する

全枚数と現在何番目かを表示します。

JavaScript

$(function() {
	$('#sample').bxSlider({
		pagerType: 'short',
		pagerShortSeparator: ' - '
	});
});

ページ送りの表示を変更するデモページ
　

ページ送りを別の場所に表示する

ページ送りを.custom-pager内に表示します。

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<div class="custom-pager"></div>

JavaScript

$(function() {
	$('#sample').bxSlider({
		pagerSelector: '.custom-pager',
	});
});

ページ送りを別の場所に表示するデモページ
出力後は以下のようになります。

出力後

<div class="custom-pager">
	<div class="bx-pager bx-default-pager">
		<div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link active">1</a></div>
		<div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div>
		<div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link">3</a></div>
		<div class="bx-pager-item"><a href="" data-slide-index="3" class="bx-pager-link">4</a></div>
		<div class="bx-pager-item"><a href="" data-slide-index="4" class="bx-pager-link">5</a></div>
	</div>
</div>

　

サムネイルを表示する

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<div class="custom-thumb">
	<a data-slide-index="0" href="#"><img src="img/img01.jpg" width="160" height="100" /></a>
	<a data-slide-index="1" href="#"><img src="img/img02.jpg" width="160" height="100" /></a>
	<a data-slide-index="2" href="#"><img src="img/img03.jpg" width="160" height="100" /></a>
	<a data-slide-index="3" href="#"><img src="img/img04.jpg" width="160" height="100" /></a>
	<a data-slide-index="4" href="#"><img src="img/img05.jpg" width="160" height="100" /></a>
</div>

JavaScript

$(function() {
	$('#sample').bxSlider({
		pagerCustom: '.custom-thumb'
	});
});

サムネイルを表示するデモページ

上記ではサムネイルをHTML内に記述していましたが、JavaScriptで追加するようにしてみます。

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<div class="custom-thumb"></div>

JavaScript

$(function() {
	// サムネイルのサイズ
	var thumbWidth = 160;
	var thumbHeight = 100;

	// サムネイルの作成
	var insert = '';
	for (var i = 0; i < $('#sample li').length; i++) {
		insert += '<a data-slide-index="' + i + '" href="#"><img src="' + $('#sample li').eq(i).children('img').attr('src') + '" width="' + thumbWidth + '" height="' + thumbHeight + '" /></a>';
	};
	$('.custom-thumb').append(insert);

	$('#sample').bxSlider({
		pagerCustom: '.custom-thumb',
	});
});

サムネイルを自動で追加するデモページ

　

左右の矢印を別の場所に表示する

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<div class="custom-control">
	<div class="custom-prev"></div>
	<div class="custom-next"></div>
</div>

JavaScript

$(function() {
	$('#sample').bxSlider({
		prevSelector: '.custom-prev',
		nextSelector: '.custom-next',
		prevText: '前の画像を見る',
		nextText: '次の画像を見る'
	});
});

左右の矢印を別の場所に表示するデモページ
　

自動スライド切り替えのボタンを表示する

JavaScript

$(function() {
	$('#sample').bxSlider({
		auto: true,
		autoStart: false,
		autoControls: true
	});
});

自動スライド切り替えのボタンを表示するデモページ

自動スライド切り替えの開始と停止ボタンを出し分けます。

JavaScript

$(function() {
	$('#sample').bxSlider({
		auto: true,
		autoStart: false,
		autoControls: true,
		autoControlsCombine: true
	});
});

自動スライド切り替えのボタンを出し分けるデモページ
　

自動スライド切り替えのボタンを別の場所に表示する

自動スライド切り替えのボタンを.custom-auto内に表示します。

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<div class="custom-auto"></div>

JavaScript

$(function() {
	$('#sample').bxSlider({
		auto: true,
		autoStart: false,
		autoControls: true,
		autoControlsSelector: '.custom-auto',
		startText: '自動スライド開始',
		stopText: '自動スライド停止'
	});
});

自動スライド切り替えのボタンを別の場所に表示するデモページ
出力後は以下のようになります。

出力後

<div class="custom-auto">
	<div class="bx-controls-auto">
		<div class="bx-controls-auto-item"><a class="bx-start" href="">自動スライド開始</a></div>
		<div class="bx-controls-auto-item"><a class="bx-stop active" href="">自動スライド停止</a></div>
	</div>
</div>

　

自動スライドの方向を逆にする

JavaScript

$(function() {
	$('#sample').bxSlider({
		auto: true,
		autoDirection: 'prev'
	});
});

自動スライドの方向を逆にするデモページ
　

カルーセル表示にする

JavaScript

$(function() {
	$('#sample').bxSlider({
		minSlides: 3,
		maxSlides: 3,
		moveSlides: 1,
		slideWidth: 320,
		slideMargin: 10
	});
});

カルーセル表示にするデモページ
現在地はカルーセルの左端になるので、真ん中に表示する場合は最後のスライド要素を先頭に移動させます。(3つ表示の場合)

JavaScript

$(function() {
	$('#sample li:last-child').prependTo('#sample');
	$('#sample').bxSlider({
		minSlides: 3,
		maxSlides: 3,
		moveSlides: 1,
		slideWidth: 320,
		slideMargin: 10
	});
});

カルーセル表示にするデモページ2
　

縦並びのカルーセル表示にする

JavaScript

$(function() {
	$('#sample').bxSlider({
		mode: 'vertical',
		minSlides: 3,
		maxSlides: 3,
		moveSlides: 1,
		slideWidth: 320,
		slideMargin: 10
	});
});

縦並びのカルーセル表示にするデモページ
　

複数のスライダーを設置して、スライドを同期させる

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<ul id="sample2">
	<li><img src="img/img08.jpg" /></li>
	<li><img src="img/img09.jpg" /></li>
	<li><img src="img/img10.jpg" /></li>
	<li><img src="img/img11.jpg" /></li>
	<li><img src="img/img12.jpg" /></li>
</ul>

JavaScript

$(function() {
	var slider01 = $('#sample').bxSlider({
		onSlideBefore: function($slideElement, oldIndex, newIndex) {
			slider02.goToSlide(newIndex);
		}
	});
	var slider02 = $('#sample2').bxSlider({
		pager: false,
		controls: false
	});
});

複数のスライダーを設置して、スライドを同期させるデモページ
　

サムネイルをカルーセルにして、スライダーと同期させる

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
	<li><img src="img/img08.jpg" /></li>
	<li><img src="img/img09.jpg" /></li>
	<li><img src="img/img10.jpg" /></li>
	<li><img src="img/img11.jpg" /></li>
	<li><img src="img/img12.jpg" /></li>
</ul>
<ul id="sample2">
	<li><a data-slide-index="0" href="#"><img src="img/img01.jpg" /></a></li>
	<li><a data-slide-index="1" href="#"><img src="img/img02.jpg" /></a></li>
	<li><a data-slide-index="2" href="#"><img src="img/img03.jpg" /></a></li>
	<li><a data-slide-index="3" href="#"><img src="img/img04.jpg" /></a></li>
	<li><a data-slide-index="4" href="#"><img src="img/img05.jpg" /></a></li>
	<li><a data-slide-index="5" href="#"><img src="img/img08.jpg" /></a></li>
	<li><a data-slide-index="6" href="#"><img src="img/img09.jpg" /></a></li>
	<li><a data-slide-index="7" href="#"><img src="img/img10.jpg" /></a></li>
	<li><a data-slide-index="8" href="#"><img src="img/img11.jpg" /></a></li>
	<li><a data-slide-index="9" href="#"><img src="img/img12.jpg" /></a></li>
</ul>

JavaScript

$(function() {
	var slider01 = $('#sample').bxSlider({
		pagerCustom: '#sample2',
		onSlideBefore: function($slideElement, oldIndex, newIndex) {
			slider02.goToSlide(newIndex);
		}
	});

	var slider02 = $('#sample2').bxSlider({
		pager: false,
		minSlides: 5,
		maxSlides: 5,
		moveSlides: 1,
		slideWidth: 180,
		slideMargin: 10,
		onSlideNext: function($slideElement, oldIndex, newIndex) {
			slider01.goToSlide(newIndex);
		},
		onSlidePrev: function($slideElement, oldIndex, newIndex) {
			slider01.goToSlide(newIndex);
		}
	});
});

サムネイルをカルーセルにして、スライダーと同期させるデモページ
現在地を中央にする場合は、サムネイルの最後の要素を先頭に移動させます。

JavaScript

$(function() {
	var slider01 = $('#sample').bxSlider({
		pagerCustom: '#sample2',
		onSlideBefore: function($slideElement, oldIndex, newIndex) {
			slider02.goToSlide(newIndex);
		}
	});

	$('#sample2 li:last-child').prependTo('#sample2');
	$('#sample2 li:last-child').prependTo('#sample2');
	var slider02 = $('#sample2').bxSlider({
		pager: false,
		minSlides: 5,
		maxSlides: 5,
		moveSlides: 1,
		slideWidth: 180,
		slideMargin: 10,
		onSlideNext: function($slideElement, oldIndex, newIndex) {
			slider01.goToSlide(newIndex);
		},
		onSlidePrev: function($slideElement, oldIndex, newIndex) {
			slider01.goToSlide(newIndex);
		}
	});
});

サムネイルをカルーセルにして、スライダーと同期させるデモページ2

　

スライダーが画面上に表示されてから自動切り替えを開始する

JavaScript

$(function() {
	var slider = $('#sample').bxSlider({
		auto: true,
		autoStart: false
	});

	var autoFlag = false;
	$(window).on('load scroll resize', function() {
		if(!autoFlag) {
			var scrolltop = $(window).scrollTop();
			var windowheight = $(window).height();
			var sliderposition = $('#sample').offset().top;
			if(scrolltop + windowheight > sliderposition) {
				slider.startAuto();
				autoFlag = true;
			}
		}
	});
});

スライダーが画面上に表示されてから自動切り替えを開始するデモページ
ページ下部にある自動切り替えのスライダーで、最初は1枚目のスライドを見せたいときに使用します。
　

画面幅がコンテンツ幅の時は1枚表示で、広い時は左右に前後の画像を表示する

HTML

<div id="slider-wrapper">
	<ul id="sample">
		<li><img src="img/img01.jpg" /></li>
		<li><img src="img/img02.jpg" /></li>
		<li><img src="img/img03.jpg" /></li>
		<li><img src="img/img04.jpg" /></li>
		<li><img src="img/img05.jpg" /></li>
	</ul>
</div>

CSS

#slider-wrapper {
	position: relative;
	left: 50%;
	width: 3000px;
	margin-left: -1500px;
}

JavaScript

$(function() {
	$('#sample li:last-child').prependTo('#sample');
	$('#sample').bxSlider({
		minSlides: 3,
		maxSlides: 3,
		moveSlides: 1,
		slideWidth: 1000
	});
});

カルーセル表示でスライド1枚の幅とコンテンツ幅が同じになるようにしています。
画面幅がコンテンツ幅の時は1枚表示で、広い時は左右に前後の画像を表示するデモページ
　

もしくは、CSSの設定で実装することもできます。

HTML

<div id="slider-wrapper">
	<div id="slider-inner">
		<ul id="sample">
			<li><img src="img/img01.jpg" /></li>
			<li><img src="img/img02.jpg" /></li>
			<li><img src="img/img03.jpg" /></li>
			<li><img src="img/img04.jpg" /></li>
			<li><img src="img/img05.jpg" /></li>
		</ul>
	</div>
</div>

CSS

#slider-wrapper {
	position: relative;
}
#slider-inner {
	margin: 0 auto;
	max-width: 1000px;
	padding-left: 50px;
	padding-right: 50px;
}

JavaScript

$(function() {
	$('#sample').bxSlider();
});

画面幅がコンテンツ幅の時は1枚表示で、広い時は左右に前後の画像を表示するデモページ
　

スマホサイズのみスライダーにする

JavaScript

$(function() {
	var slider;
	var sliderFlag = false;
	var breakpoint = 480;

	$(window).on('load resize', function() {
		sliderSet();
	});

	function sliderSet() {
		var windowWidth = $(window).width();
		if (windowWidth <= breakpoint && !sliderFlag) {
			slider = $('#sample').bxSlider();
			sliderFlag = true;
		} else if (windowWidth > breakpoint && sliderFlag) {
			slider.destroySlider();
			sliderFlag = false;
		}
	}
});

スマホサイズのみスライダーにするデモページ
特定の画面サイズの時にはスライダーにしたくない場合に使用します。
　

PCとスマホでスライダーの設定を変更する

JavaScript

$(function() {
	var sliderType;
	var breakpoint = 480;
	var spOption = {
		mode: 'fade'
	}
	var pcOption = {
		mode: 'vertical'
	}

	var slider = $('#sample').bxSlider();
	$(window).on('load resize', function() {
		sliderSet();
	});

	function sliderSet() {
		var windowWidth = $(window).width();
		if (windowWidth <= breakpoint && sliderType != 'sp') {
			slider.reloadSlider(spOption);
			sliderType = 'sp';
		} else if (windowWidth > breakpoint && sliderType != 'pc') {
			slider.reloadSlider(pcOption);
			sliderType = 'pc';
		}
	}
});

PCとスマホでスライダーの設定を変更するデモページ
画面サイズによってスライダーの設定を変更したい場合に使用します。
　

スライド画像を動的に追加した時に、スライダーを更新する

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<button id="add">追加</button>

JavaScript

$(function() {
	var slider = $('#sample').bxSlider();
	$('#add').on('click', function() {
		$('#sample').append('<li><img src="img/img08.jpg" /></li>');
		setTimeout(function() {
			slider.reloadSlider();
		}, 0);
	});
});

スライド画像を動的に追加した時に、スライダーを更新するデモページ
スライダー構築後、動的にスライド要素が追加された場合に使用します。
chromeだと動的に追加した要素が1枚目に表示されたりすることがあったので、setTimeoutで間を取るようにしています。

JavaScript

$(function() {
	var slider = $('#sample').bxSlider();
	$('#add').on('click', function() {
		$('#sample').append('<li><img src="img/img08.jpg" /></li>');
		slider.reloadSlider();
	});
});

スライド画像を動的に追加した時に、スライダーを更新するデモページ2
setTimeoutで間を取らなかった場合の例です。
　

特定の場合に自動スライド切り替えを開始・停止する

HTML

<div id="hover-area">ここにオンマウスしている間だけ自動切り替えになります。</div>
<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>

JavaScript

$(function() {
	var slider = $('#sample').bxSlider();
	$('#hover-area').hover(function() {
		slider.startAuto();
	}, function() {
		slider.stopAuto();
	});
});

特定の場合に自動スライド切り替えを開始・停止するデモページ
自動スライド切り替えを一時的に開始したり止めたりする場合に使用します。
　

スライドに含まれるvideoをレスポンシブ対応する

ダウンロード時に一緒に入っているjquery.fitvids.jsを使用します。

ファイル読み込み

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery.fitvids.js"></script>
<script src="./jquery.bxslider.min.js"></script>

HTML

<ul id="sample">
	<li><iframe width="960" height="600" src="https://www.youtube.com/embed/uiouYAL7eRA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>

JavaScript

$(function() {
	$('#sample').bxSlider({
		video: true
	});
});

スライドに含まれるvideoをレスポンシブ対応するデモページ
対応しなかった場合は以下のようになります。

スライドに含まれるvideoをレスポンシブ対応しなかった場合のデモページ

　

スライドした時にYouTubeの再生を止める(レスポンシブ非対応)

YouTubeの操作をJavaScriptから行うため、YouTubeのAPIを使用します。

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li data-youtubeid="3WRZKPidbf8"></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>

JavaScript

// APIの埋め込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var slider;
var ytPlayer = [];
var ytData = [];
// プレーヤーのサイズ
var ytWidth = 960;
var ytHeight = 600;

// APIの準備完了後
var ytReady = false;
function onYouTubeIframeAPIReady() {
	ytReady = true;
}

// youtubeの埋め込み
function youtubeSet() {
	for(var i = 0; i < ytData.length; i++) {
		ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			width: ytWidth,
			height: ytHeight,
			videoId: ytData[i]['id']
		});
	}
}

$(function() {
	slider = $('#sample').bxSlider({
		onSlideBefore: function($slideElement, oldIndex, newIndex) {
			var currentYtid = $('#sample li').eq(oldIndex + 1).attr('data-youtubeid');
			if(currentYtid != undefined) {
				for (var i = 0; i < ytData.length; i++) {
					if(ytData[i]['id'] == currentYtid) {
						var ytStatus = ytPlayer[i].getPlayerState();
						if(ytStatus == 1 || ytStatus == 3) {
							ytPlayer[i].pauseVideo();
						}
					}
				};
			}
		}
	});

	// youtubeを埋め込むスライドを取得
	$('[data-youtubeid]').each(function(e) {
		$(this).append('<div id="bx-yt' + e + '"></div>')
		ytData[e] = {
			id: $(this).attr('data-youtubeid'),
			area: 'bx-yt' + e
		};
	});

	// APIの準備ができているか確認
	function ytCheck() {
		if(ytReady) {
			// youtube埋め込みの実行
			youtubeSet();
		} else {
			setTimeout(ytCheck, 200);
		}
	}
	ytCheck();
});

スライドした時にYouTubeの再生を止める(レスポンシブ非対応)デモページ
YouTube読み込み後にスライダーのリロードをかけるとレスポンシブでも実装できそうでしたが、少し挙動が怪しいそうなのでレスポンシブ非対応にしています。
挙動は怪しいですが、対応させた場合は以下のようになります。

JavaScript

// APIの埋め込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var slider;
var ytPlayer = [];
var ytData = [];
// プレーヤーのサイズ
var ytWidth = 960;
var ytHeight = 600;

// APIの準備完了後
var ytReady = false;
function onYouTubeIframeAPIReady() {
	ytReady = true;
}

// youtubeの埋め込み
function youtubeSet() {
	for(var i = 0; i < ytData.length; i++) {
		ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			width: ytWidth,
			height: ytHeight,
			videoId: ytData[i]['id'],
			events: {
				'onReady': onPlayerReady
			}
		});
	}
}

// 各プレーヤー準備完了後の処理
var ytLoadCount = 0;
var ytFix = false;
function onPlayerReady(e) {
	ytLoadCount++;
	if(ytLoadCount >= ytData.length) {
		if(!ytFix) {
			slider.reloadSlider();
			ytFix = true;
		}
	}
}

$(function() {
	slider = $('#sample').bxSlider({
		video: true,
		onSlideBefore: function($slideElement, oldIndex, newIndex) {
			var currentYtid = $('#sample li').eq(oldIndex + 1).attr('data-youtubeid');
			if(currentYtid != undefined) {
				for (var i = 0; i < ytData.length; i++) {
					if(ytData[i]['id'] == currentYtid) {
						ytPlayer[i].pauseVideo();
					}
				};
			}
		}
	});

	// youtubeを埋め込むスライドを取得
	$('[data-youtubeid]').each(function(e) {
		$(this).append('<div id="bx-yt' + e + '"></div>')
		ytData[e] = {
			id: $(this).attr('data-youtubeid'),
			area: 'bx-yt' + e
		};
	});

	// APIの準備ができているか確認
	function ytCheck() {
		if(ytReady) {
			// youtube埋め込みの実行
			youtubeSet();
		} else {
			setTimeout(ytCheck, 200);
		}
	}
	ytCheck();
});

スライドした時にYouTubeの再生を止めるデモページ
レスポンシブ対応のためjquery.fitvids.jsを使用しています。
　

1枚目にYouTubeを配置して自動再生、再生完了後に自動切り替え開始する(レスポンシブ非対応)

ひとつ前のサンプルと同じくレスポンシブ非対応です。

HTML

<ul id="sample">
	<li><div id="bx-yt"><img src="img/img01.jpg" /></div></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>

JavaScript

// APIの埋め込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var slider;
var ytPlayer;
var youtubeId = '0kBXwp8FVKE';
// プレーヤーのサイズ
var ytWidth = 960;
var ytHeight = 600;

// APIの準備完了後
var ytReady = false;
function onYouTubeIframeAPIReady() {
	ytReady = true;
}

// youtubeの埋め込み
function youtubeSet() {
	ytPlayer = new YT.Player('bx-yt', {
		width: ytWidth,
		height: ytHeight,
		videoId: youtubeId,
		playerVars: {
			rel: 0
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

var ytEmbed = false;
function onPlayerReady(e) {
	ytEmbed = true;
}
function onPlayerStateChange(e) {
	var ytStatus = e.target.getPlayerState();
	if(e.target.getIframe().id == 'bx-yt') {
		if(ytStatus == 0) {
			slider.goToNextSlide();
			slider.startAuto();
		} else if(ytStatus == 2) {
			slider.startAuto();
		} else if(ytStatus == 1 || ytStatus == 3) {
			slider.stopAuto();
		}
	}
}

$(function() {
	slider = $('#sample').bxSlider({
		onSlideBefore: function($slideElement, oldIndex, newIndex) {
			ytPlayer.pauseVideo();
		},
		onSliderLoad: function() {
			ytBxReady();
		}
	});

	// APIの準備ができているか確認
	function ytCheck() {
		if(ytReady) {
			// youtube埋め込みの実行
			youtubeSet();
		} else {
			setTimeout(ytCheck, 200);
		}
	}
	ytCheck();

	// 
	function ytBxReady() {
		if(ytEmbed) {
			// youtube埋め込みの実行
			ytPlayer.playVideo();
		} else {
			setTimeout(ytBxReady, 200);
		}
	}
});

1枚目にYouTubeを配置して自動再生、再生完了後に自動切り替え開始する(レスポンシブ非対応)デモページ
動画再生中は自動切り替えを行わないようにします。
　

前後ボタンやページ送りをクリックした時に、自動切り替えを止めないようにする

bxsliderの仕様上、ユーザーが操作してスライダーをスライドさせると、自動切り替えが停止するようになっているようです。
この自動切り替えを止めないようにするために、スライド完了後に自動切り替えを開始させます。

JavaScript

$(function() {
	var slider = $('#sample').bxSlider({
		auto: true,
		onSlideAfter: function(ele, oldIndex, newIndex) {
			slider.startAuto();
		}
	});
});

前後ボタンやページ送りをクリックした時に、自動切り替えを止めないようにするデモページ

　

サムネイルにオンマウスで切り替える

サムネイルクリックではなくオンマウスで画像切り替えを行います。

HTML

<ul id="sample">
	<li><img src="img/img01.jpg" /></li>
	<li><img src="img/img02.jpg" /></li>
	<li><img src="img/img03.jpg" /></li>
	<li><img src="img/img04.jpg" /></li>
	<li><img src="img/img05.jpg" /></li>
</ul>
<div class="custom-thumb">
	<a data-slide-index="0" href="#"><img src="img/img01.jpg" width="160" height="100" /></a>
	<a data-slide-index="1" href="#"><img src="img/img02.jpg" width="160" height="100" /></a>
	<a data-slide-index="2" href="#"><img src="img/img03.jpg" width="160" height="100" /></a>
	<a data-slide-index="3" href="#"><img src="img/img04.jpg" width="160" height="100" /></a>
	<a data-slide-index="4" href="#"><img src="img/img05.jpg" width="160" height="100" /></a>
</div>

JavaScript

$(function() {
	var slider = $('#sample').bxSlider({
		pagerCustom: '.custom-thumb'
	});
	$('.custom-thumb a').mouseover(function() {
		var currentSlide = $(this).attr('data-slide-index');
		slider.goToSlide(currentSlide);
	});
});

サムネイルにオンマウスで切り替えるデモページ
切り替わる前に違うサムネイルをオンマウスした場合、反応しません。
　

スライダー上で縦にスワイプ(スクロール)できないようにする

JavaScript

$(function() {
	$('#sample').bxSlider({
		preventDefaultSwipeY: true
	});
});

スライダー上で縦にスワイプ(スクロール)できないようにするデモページ
対応しなかった場合は以下のようになります。
変更しなかった場合のデモページ
　

【参考サイト】

• Options | Responsive jQuery Slider | bxSlider