WEBサイトを作るとき、何かと入れる機会の多いスライドショー。簡単なようで、デザインを変えたいからといってゼロベースで作りだすと、意外に作るアクションも多くて大変です。
今回は、筆者がよくお世話になっている簡単設置・多機能・スマホにも対応、そして簡単なカスタマイズも対応しやすいおすすめスライドショーjQueryプラグイン・bxSliderをご紹介します。
前提
jQueryの基本的な設置方法をご存じの方向けに書いています。
bxSlider
おすすめポイントは以下。個人的なことですが、こんなに多機能で高クオリティなのにジョークライセンスを採用しているところがなんとも粋だなぁと…こんなに汎用的に作るのなかなか難しいと思うんですよね。とてもありがたいです。
- スマホ対応済み
- スライドショーの切り替え３種類。フェード、横スライド、縦スライド。
- 動画やhtmlコンテンツのスライドショーも可能
- IE7+対応で、大体のモダンブラウザに対応
- カルーセルも対応。
- 個人はもちろん、商用利用可能（※WTFPL license）
bxSliderのダウンロード
公式サイト「Download」ボタンから、ファイル一式をダウンロードできます。
実際に動作に必要になるのは、「jquery.bxslider.min.js」「jquery.bxslider.css」です。あとは、言わずもがな、jQuery本体ですね。
bxSliderの設置方法
公式ページの「How to install」に丁寧に書いてあるし、そんなに手順もないのでわざわざ同じことを書くこともないかなと…少しだけ補足を。
- jQuery本体をきちんと読み込むこと
- 「jquery.bxslider.min.js」「jquery.bxslider.css」のパスを間違えないこと
- htmlマークアップで「ul」タグにclass名をつけること（公式のサンプルではbxsliderになっていますね）
- bxsliderのコールの記述に注意（下記）
コールタグをhtmlファイルに記述するときは、ちゃんとscriptタグでくくりましょう。（わかってるって？心配性ですみません）
スライドをフェードで切り替え、切り替えスピードを1000にしたいときはこう書きます。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
speed: 1000
});
});
</script>
オプションもたくさんあるので、利用になれてきたらいろいろ使ってみてください。
公式にオプション一覧があります。
ページャーの利用・非表示やネクスト・プレビューボタンの非表示など、細かく設定が変えられるのでデザイン変更もしやすいです。
ネクスト、プレビューボタンのデザイン変更や位置の変更程度であればCSSだけでカスタマイズできるのでだいたいことたりますので、手間をかけずにサイトデザインにあったオリジナルなスライドショーにできるので、おすすめです。
おわり
コメントを残す