【jquery/bxsliderレスポンシブ】ロード時のウィンドウ横幅を補足して、スライダー枚数・サイズ・マージンを変えるカスタマイズ
｜ 更新： 2024/05/05 ｜ 3676文字
今回は、jqueryのスライダープラグイン・bxsliderを使って、ロード時のウィンドウ横幅を補足・枚数やサイズの変更をしてみます。 うまい人はCSSだけで出来るかもしれないけど(笑)、管理人はjavascript側でやってみました。早速内容を確認していきましょう。
目次
bxsliderとは？windowサイズ変更の挙動は？
最近はslickや、jQuery無し環境だとSwiper.js、ただ流すだけならＣＳＳ・keyframesなどに押されている印象はありますが、サクッとwebサイトにスライダー機能を設置できるjqueryのスライダープラグインです。『スライダー枚数・スライダーが終わったらループ・自動スタート・コールバック』など、パラメータも詳細に設定できます。
『tickerやinfiniteLoop、speed』の組み合わせによっては、いきなり巻き戻るとか変な挙動は見られますが、事前に押さえて対策しておけば使いやすいと思います。
挙動については、管理人もサイトにちょっと入れているんですが、window widthによって大きいサイズの画像を縮めるなどのレスポンシブ対応はしてくれます。
(*デフォルトでは、枚数切り替えまではしないようです)
bxslider公式
https://bxslider.com
bxsliderロード時のウィンドウ横幅を補足して、スライダー枚数などを変えるコード
ＨＴＭＬ
<div class=”slider-wrap”>
<div id=”slider”>
<div class=”slideitem”>
<img src=”./img/001.jpg” alt=”mv” loading=”lazy”>
</div>
省略～
<div class=”slideitem”>
<img src=”./img/005.jpg” alt=”mv” loading=”lazy”>
</div>
</div>
</div>
</div>
スライダーのhtmlはこんな感じです。id=”slider”がbxsliderかける要素の指定です。省略してますが、5枚画像でやってみます。ここら辺は、bxslider使うときの定番みたいな感じです。
ＣＳＳ
width:100%;
height:auto;
background-color:#ffaacc;
padding:32px 0 8px 0;
}
.slider-wrap{
max-width:1280px;
margin:0 auto;
}
.slideitem img{
display:block;margin:0 auto;
}
.bx-wrapper{
box-shadow:none;
border:none;
max-width:100% !important;
}
.bx-controls div a{
margin-right:1rem;
}
#slider .slideitem{
display: none;
}
.bx-viewport #slider .slideitem {
display: block !important;
}
CSSスライダー部分です。ラッパーがmax-width:1280px;で中央寄せになっていてこのなかにスライダーが入ります。そのほかbx-wrapperなど、出力される要素の変更なども。
一時的にdisplay: none;になっているのは、スライダーを読んでから表示するためです(最初画像が縦に並ぶの対策)。調べた感じ、この方法で対応している方が多いみたいです。
javascript
$(window).on('load', function(){
//fullsize
var width = 400;
var margin = 32;
var slideNum = 3;
var windowWidth = jQuery(window).width();
//below 1025(include ipad pro 1024 ipad mini 768)
if (windowWidth < 1025) {
width = 500;
var margin = 20;
slideNum = 2;
}
//below 767
if (windowWidth < 767) {
width = 400;
var margin = 0;
slideNum = 1;
}
$('#slider').bxSlider({
responsive: true,
mode : ‘horizontal’,
pager : false,
maxSlides : slideNum ,
minSlides : slideNum ,
moveSlides : 1,
slideWidth :width,
infiniteLoop : true,
ticker : false,
useCSS : false,
auto : false,
speed : 700,
slideMargin :margin,
});
});
</script>
とりあえず下の方は、よくあるbxsliderのコードで、『prev/nextで切り替え、オート無し（auto : false），ループ可（infiniteLoop : true,），自動で流れない（ticker : false）』みたいな設定になっています。
ポイントは上で、『ロード時に jQuery(window).width()でウィンドウ幅を補足して、枚数・サイズ・マージンをそれぞれに応じてセット』という点です。1025～768なのは、ipad proやipad miniも入れるためです。
表示例
まずはPCビューをみてみます。
横幅1500くらいです。この状態だと3枚。
tickerとかはfalseになっているので、nextボタンを押して送ります。
横幅1024pxのipad pro。
実機は持っていないのでデベロッパーツールで。ipad proは少し大きいので、横幅を500にしておくと、余った3枚目が少しはみ出て表示されないようです（400・マージン20・400だと、残りの204px分で3枚目が半分くらい出てくる）。
横幅768のipad mini。
500に指定しましたが、オーバーする分はbxsliderが内部で計算して、縮小してくれたようです。少し詰まった感じになりますが。
横幅390のiphone 12pro。
スマートフォンで横3枚や2枚だと狭いですからね。写真をしっかり見てもらうには 1枚がちょうどよいかもしれないですね。
このサイトのサーバー上にも上げているので、操作してみたい方はこちらもご覧ください。右クリックでソース見ていただいてもokです。以下のリンクよりどうぞ。
bx slider javascriptレスポンシブてすと
https://division-web.atelier-ss-agency.com/test/202404slider
あとがき・まとめ
- bxsliderはデバイスに応じて画像サイズ調整はするが、枚数は変わらない
- ロード時に(window).width()で幅を取得すると、その値に応じて枚数やマージンを切り替えられる
まとめると、こんなところでしょうか。ウィンドウ幅補足方法がわかれば、CSSのメディアクエリだけでなく、js絡みでもいろいろできそうです。
【カテゴリ】- javascript/jQuery、その他
【タグ】- スライダー作成
