【jQuery】誰でも簡単にスライダーを実装!《bxSlider》

1,609 view

bxSlider

はじまりました。
制作部のゆーたが「これは使える!」と感じたプラグインを紹介していくこのコーナー。

記念すべき第1回目は『bxSlider』です!

その特徴はなんといっても誰でも簡単にスライダーを導入できちゃうところ。
早速やってみましょう。

1.ファイル一式をダウンロード

まずはbxSliderの公式サイトにアクセスし、右上の「Download」ボタンをクリック。

ダウンロードしたzipフォルダを解凍すると、いくつかファイルが入ってますね。
今回はその中から、こちらの3つを使います。

  • jquery.bxslider.min.js
  • jquery.bxslider.css
  • images

なんとなんと、これだけでスライダーが実現できちゃうんです!

2.headタグ内でファイルを読み込む

続いて、HTMLのheadタグ内に以下のコードを挿入。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

各ファイルへのパスはその都度書き換えてくださいね。
※imagesフォルダはjquery.bxslider.cssと同じ階層に置いてください。

3.スライド画像を記述

スライドさせたい画像を記述します。

<ul class="bxslider">
<li><img src="/img/pic1.jpg" /></li>
<li><img src="/img/pic2.jpg" /></li>
<li><img src="/img/pic3.jpg" /></li>
<li><img src="/img/pic4.jpg" /></li>
</ul>

親要素に「class=”bxslider”」を指定するのをお忘れなく。

4.関数の呼び出し

headタグ内に以下を記述し、関数を呼び出します。

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>

これでスライダーの実装は完了です。はや!

◎オプションもいっぱいあります

bxsliderには、大量のオプションが用意されています。

設定の仕方はこんな感じ。

<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
auto: true, //自動スライドの設定
pager: false, //ページャーの表示設定
pause: 3000, //自動スライドの待ち時間
speed: 1000, //スライドにかかる時間
});
});
</script>

いくつか組み合わせることで、様々な動きをつけることが可能!

詳しくは公式サイトのオプション一覧をご参照ください。
また、こちらのページでは各オプションの効果が日本語でわかりやすくまとめられています。ありがたい!!!
自分で書くのが面倒だなんてそんな

そうそう、このbxSlider、実はレスポンシブにも対応しております。

PCサイト・スマホサイト共にかなり使い勝手のよいプラグインですので、
みなさんもぜひお試しあれ!

WRITER

ゆーた

制作 ゆーた

新潟生まれ新潟育ちの24歳。

現在は制作部として奮闘中。たまにカメラも構える。
体力なさそうなのはデフォルトです。

TAGS