bxsliderでスライダー簡単実装
スライダーをbxsliderで簡単に実装する方法を解説します。
1) bxsliderにアクセスし、右上の「Github」をクリックします。
2) 「Download Zip」をクリックし、必要なファイルをダウンロードします。
3) ダウンロードしたZIPを開き、distというフォルダを開くと、以下のようなファイルが入っているので、「bxslider.min.css」と「jquery.bxslider.min.js」を実装したいページで読み込みましょう。
これでbxsliderを使う準備ができました。以降は以下のようにHTMLなどを書いていきましょう。
HTML
<div class="bxslider1">
<div class="bxslider">
<ul>
<li><img src="https://placehold.jp/ffc4e7/ffffff/300x300.png?text=Slide1" alt="">
</li>
<li><img src="https://placehold.jp/dac4ff/ffffff/300x300.png?text=Slide2" alt="">
</li>
<li><img src="https://placehold.jp/c4dcff/ffffff/300x300.png?text=Slide3" alt="">
</li>
<li><img src="https://placehold.jp/c4ffe5/ffffff/300x300.png?text=Slide4" alt="">
</li>
<li><img src="https://placehold.jp/ffffc4/ffffff/300x300.png?text=Slide5" alt="">
</li>
</ul>
</div>
</div>
HTMLのポイントは、bxslider1のdivの中に、bxsliderのdiv、その中にスライドする要素をリストで入れるところです。
JS
$(function () {
// スライダー
var $slide = $('.bxslider1');
var $slide_ul = $slide.find('ul');
$slide_ul.bxSlider({
easing: 'easeOutExpo',
speed: 1000,
onSliderLoad: function(){
$slide_ul.animate({
opacity: 1
}, 500);
}
}
);
});
上記のようなJSで、easingやスピードを変えることができます。 参考 → 【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。