【bxSlider】中央のスライドを大きくする方法

2023-08-24

jQueryのスライダープラグイン「bxSlider」で中央のスライドだけ大きく方法をご紹介します｡

サンプル

真ん中のスライドだけ大きくなっています｡

HTML

HTMLはこんな感じ｡
左右のスライドをチラ見せするため､#bxsliderを更に#bx-wrapperで囲っています｡

<div id="bx-wrapper">
	<div id="bxslider">
		<div class="slide"><img src="img01.jpg"></div>
		<div class="slide"><img src="img02.jpg"></div>
		<div class="slide"><img src="img03.jpg"></div>
		<div class="slide"><img src="img04.jpg"></div>
	</div>
</div>

CSS

CSSはこんな感じ｡
前半は､左右のスライドをチラ見せするための記述
後半は中央のスライドを大きくするための記述です｡

/* 左右のスライドをチラ見せするための記述 */
#bx-wrapper {
	overflow: hidden;
}
.bx-wrapper {
	max-width: 640px!important;
	margin-left: auto;
	margin-right: auto;
	background: none;
	border: none;
	box-shadow: none;
}
.bx-viewport {
	overflow: visible!important;
}

/* 中央のスライドを大きくするための記述 */
#bxslider .slide img {
	display: block;
	transition: transform 0.3s;
}
#bxslider .slide:not(.active-slide) img {
	transform: scale(0.8);
}

JS

bxSlider実行時､「onSliderLoad」と「onSlideAfter」というコールバックを使って､アクティブなスライドに「active-slide」クラスを付与します｡

$(function(){
	$("#bxslider").bxSlider({
		auto: true,
		touchEnabled:false,
		onSliderLoad: function(currentIndex){
			//スライド読込み時､アクティブなスライドにクラス付与
			$("#bxslider .slide:not(.bx-clone)").eq(currentIndex).addClass("active-slide");
		},
		onSlideAfter: function($slideElement){
			//スライド後､アクティブなスライドにクラス付与
			$("#bxslider .slide").removeClass("active-slide");
			$slideElement.addClass("active-slide");
		}
	});
});

公式ドキュメントはこちら

例えば2枚目がアクティブなとき､およそこのようなHTMLになり
アクティブなスライドだけCSS transformにより､大きくなります｡

<div id="bxslider">
	<div class="slide"><img src="/slickthumb/img/img01.jpg"></div>
	<div class="slide active-slide"><img src="/slickthumb/img/img02.jpg"></div>
	<div class="slide"><img src="/slickthumb/img/img03.jpg"></div>
	<div class="slide"><img src="/slickthumb/img/img04.jpg"></div>
</div>