2023.6.28 ／更新日： 2023.6.29

【JQuery】bxsliderでスライドを3枚表示して1枚目を真ん中に配置する

bxsliderで複数枚のスライドを表示させた際に、一枚目を真ん中に配置する手順をご紹介します。

スライダーのオプション設定

$('.bxslider).bxSlider({
minSlides: 1,
maxSlides: 3,
slideWidth: 400,
});

スライダーを3枚、400pxの幅で表示させる設定です。

cssは以下を記述してください。

.bxslider {
margin-left: 50%;
}
.bxslider li {
margin-left: -200px;
margin-right: 200px !important;
}

スライダーのli要素に、設定したスライド幅の半分のマージンを左右にそれぞれ指定します。

slideMarginでスライダーの間にマージンを設ける場合はliのmargin-rightにその幅分を足してあげます。

$('.bxslider02').bxSlider({
minSlides: 1,
maxSlides: 3,
slideWidth: 400,
slideMargin: 20,
});

cssは以下を記述してください。

.bxslider02{
 margin-left: 50%;
}
.bxslider02 li {
 margin-left: -200px;
 margin-right: 220px !important;
}

スライド幅が400pxでその半分が200pxなので、200px+20pxでmargin-rightは220pxとなります。

画面幅よりもslideWidthのほうが大きいとレイアウトが崩れますので、ウィンドウサイズで処理を分岐する設定を追記します。

var windowWidth = $(window).width();
var windowSm = 400;
if (windowWidth <= windowSm) {
$('.bxslider04').bxSlider({
auto: true,
pager: true,
controls: true,
speed: 800,
minSlides: 1,
maxSlides: 3,
slideWidth: 300,
});
} else {
 $('.bxslider04').bxSlider({
auto: true,
pager: true,
controls: true,
speed: 800,
minSlides: 1,
maxSlides: 3,
slideWidth: 400,
});
}

var windowSm = 400;の部分が、画面幅のどこで条件を切り替えるかを設定していますので、任意で調整してください。こちらの例では、画面幅が400px以上ならスライドサイズは400px、画面幅が400px以下ならスライドサイズは300pxとなるように記述しています。その際、cssの調整もお忘れなく。

#JQuery･PHP