レスポンシブ対応の便利なjQueryプラグイン「jquery.bxslider.js」のbxSliderをカルーセルや、コンテンツスライダーなど、デザインサンプル5種を作りました。
bxSliderの基本的な使い方は下記からどうぞ！
もくじ
jQuery関連記事
【jQuery】pdfが存在するか、mimeタイプのバリデーションする
jQuery UIのsortableを使ってリストをドラッグで並び替える
jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する
HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる
bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種
bxSliderの使い方と、オプションでのカスタマイズ方法
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
![jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する](https://mugenweb-note.com/web/wp-content/uploads/2020/08/mamechi1110022.jpg)
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる
bxSliderをカルーセル表示にする
See the Pen
by むぅ (@mugenweb)
on CodePen.0
JavaScript
$(document).ready(function () {
$('#bxslider').bxSlider({
slideWidth: 450,
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
});
slideWidth、minSlides、maxSlides、moveSlidesのオプションを設定することで、カルーセルスライダーとして使えるようになります。
bxSliderをサムネイルをクリックでもスライド可能にする
See the Pen
by むぅ (@mugenweb)
on CodePen.0
html
<div class="bx-pager">
<a data-slide-index="0" href="javascript:void(0)"><img
src="https://mugenweb-note.com/web/wp-content/uploads/2021/08/TOMS526511_TP_V.jpg" /></a>
<a data-slide-index="1" href="javascript:void(0)"><img
src="https://mugenweb-note.com/web/wp-content/uploads/2021/06/shikun12665V7A4247_TP_V.jpg" /></a>
<a data-slide-index="2" href="javascript:void(0)"><img
src="https://mugenweb-note.com/web/wp-content/uploads/2021/02/tomcat1569_TP_V.jpg" /></a>
<a data-slide-index="3" href="javascript:void(0)"><img
src="https://mugenweb-note.com/web/wp-content/uploads/2020/11/tomcat1577_TP_V.jpg" /></a>
</div>
JavaScript
$(document).ready(function () {
$('#bxslider').bxSlider({
pagerCustom: '.bx-pager'
});
});
基本のhtmlにサムネイル部分を追加します。data-slide-index="0"をaタグに記述することで、クリックされたときにスライダーの該当番号に切り替わります。
javascript:void(0)については、下記を参照してください。
bxSliderをニュースティッカーモードで表示する
See the Pen
by むぅ (@mugenweb)
on CodePen.0
JavaScript
$(document).ready(function () {
var slideSpeed = 5000;
var slideLength = $('#bxslider li').length;
$('#bxslider').bxSlider({
ticker: true,
minSlides: 2,
maxSlides: 3,
slideWidth: 320,
slideMargin: 10,
tickerHover: true,
speed: slideSpeed * slideLength
});
});
tickerで、ニュースティッカーモードで表示できます。
要素の数で、スピードが変わってしまうので、slideLengthで要素の数を取得し、基本のスピードと合わせて計算しています。
横幅いっぱいで両サイドが少し見えるデザイン
See the Pen
by むぅ (@mugenweb)
on CodePen.0
html
<div id="container">
<div id="wrap">
<ul id="bxslider">
<li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/08/TOMS526511_TP_V.jpg"></li>
<li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/06/shikun12665V7A4247_TP_V.jpg"></li>
<li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/02/tomcat1569_TP_V.jpg"></li>
<li><img src="https://mugenweb-note.com/web/wp-content/uploads/2020/11/tomcat1577_TP_V.jpg"></li>
</ul>
</div>
</div>
css
#container{
overflow: hidden;
}
#wrap{
max-width: 500px;
width: 100%;
margin: 0 auto;
}
.bx-wrapper{
width: 100%;
margin: 0 auto;
}
.bx-viewport{
overflow: visible !important;
}
JavaScript
$(document).ready(function () {
$('#bxslider').bxSlider({
slideWidth: 500,
maxSlides: 2
});
});
html構造とcssを変えるだけでオシャレっぽいデザインに変更できます。maxSlidesを2とすることで、スライドしたタイミングで移行先の画像が表示されないのを解消しています。
bxSliderをコンテンツスライダーとして使う
See the Pen
by むぅ (@mugenweb)
on CodePen.0
html
<ul id="bxslider"> <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/08/TOMS526511_TP_V.jpg"> <p>テキスト</p></li> <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/06/shikun12665V7A4247_TP_V.jpg"> <p>テキスト</p></li> <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/02/tomcat1569_TP_V.jpg"> <p>テキスト<br>テキスト</p></li> <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2020/11/tomcat1577_TP_V.jpg"> <p>テキスト</p></li> </ul>
css
#bxslider ul{
display:flex;
padding-left:0
}
#bxslider ul li{
width: 49.5%;
}
#bxslider ul li:first-child{
margin-right: 1%;
}
JavaScript
$('#bxslider').bxSlider({
slideWidth: 920,
hideControlOnEnd: true,
pager: true,
controls: true,
speed: 1000,
adaptiveHeight: true,
pause: 10000
});
基本のhtml構造を変更し、ulをスライドする要素にすることで、liたちを同じスライドとして扱っています。
スライド同士の高さが違う場合、adaptiveHeightでスライダーの高さの自動調整ができるので、それぞれの高さにあった表示ができます。
コメント