HTMLコーディング

高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

もう年の瀬ですね。
当社の営業日も実質今日で終わりです。
あとは大掃除を残すのみ(/・ω・)/

そんな中でのこんなブログ記事です。
仕事熱心ですねー_(:3 」∠)_

bxSlider、ご存知ですよね?

たぶん有名だと思う、高機能で簡単設置できてレスポンシブにも対応しているjQueryスライダーです。
(スライダーともカルーセルとも言えるとは思いますが)
オプションも充実しています。

私も業務で必要になるたびに利用しています。

「スライダーの時は、これかな」
みたいな感じです。

使うたびに設置方法とかオプションとか調べるのが手間になるし、効率も悪いので、この辺で記事にまとめておこうと思った次第です。

bxSliderをダウンロード

まずは公式サイトからファイルを一式ダウンロードしましょう。
bxSlider 公式サイト

「Click here to install」をクリックすると、詳しい設置説明ページに行きます。
「Click here to install」をクリックすると、詳しい設置説明ページに行きます。


スクロールして、画面中ほどにある「Download jquery.bxslider.zip here」からファイルのダウンロードができます。

bxSliderをインストール

必要になるファイルを読み込みます。

<head>内に記載

<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.min.css">

</body>直前に記載

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>

最近は、JavaScriptやjQueryを読み込む場所は</body>直前が推奨されてます。

ページ内すべての要素を読み込んでからJavaScriptやjQueryを読み込む流れだと、JavaScriptやjQueryの読み込みエラーでロードが長くなったとしても影響が少ないからですね。
今まで通り<head>だと、JavaScriptやjQueryの読み込み時にエラーになると、そこでロードが長くなってしまって、ページの表示速度が遅くなったりしますので、注意しましょう。

※使用するオプションによっては、以下のファイルの読み込みも必要になります。
jQuery本体と、jquery.bxslider.min.jsの間にはさんでください。

<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

HTML

<ul class="slider">
<li><img src="img/photo01.jpg" alt="スライド1"></li>
<li><img src="img/photo02.jpg" alt="スライド2"></li>
<li><img src="img/photo03.jpg" alt="スライド3"></li>
<li><img src="img/photo04.jpg" alt="スライド4"></li>
</ul>

HTMLはシンプルです。
とくになんの問題もないですね(‘ω’)ノ

JavaScript

<script>
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>

オプションをなにも指定しなくても、最低限これだけ記載すれば動きます。

ちなみに.sliderの部分には、idかclass名を入れましょう。
今回はclassをsliderにしているので、.sliderとなります。

オプション設定した場合は以下のような感じに記載します。

<script>
$(document).ready(function(){
$('.slider').bxSlider({
mode: 'horizontal',
speed: 2000
});
});
</script>

オプション一覧

というわけで。
設定できるオプションについて一覧にまとめました。

できることが多いんですが、数が多いので、使いたい時にさくっと調べられればいいなーという感じでまとめてます。

一般的なオプション

mode スライド間の遷移のタイプ
‘horizontal’ 横方向(初期値)
‘vertical’ 縦方向
‘fade’ フェード
speed スライド遷移時間(ミリ秒)
整数を指定
初期値:500
slideMargin 各スライド間のマージン
整数を指定
初期値:0
startSlide 開始スライドを設定(ゼロベース)
整数を指定
初期値:0
randomStart 最初に表示するスライドをランダムに設定
false(初期値)
true
slideSelector スライドとして使用する要素(例: ‘div.slide’)
jQueryセレクタで指定。
infiniteLoop ループ設定
true(初期値)
false
hideControlOnEnd スライドが最初または最後である場合、「Prev」および「Next」コントロールを表示or非表示の設定
infiniteLoop:falseの場合にのみ有効
false(初期値)
true
easing css3のtransitionを使用するときのeaseのタイプ
css3を使用する場合はtransition-timing-functionの値を入れる、css3のtransitionを使用しない場合はjquery.easing.1.3.jsのオプションの値を入れる。
初期値:null
※jquery.easing.1.3.js必須
captions 画像キャプションを表示。キャプションはimgのtitle属性から取得。
false(初期値)
true
ticker tickerモードでスライダを使用。ニュースピッカーみたいなやつ
false(初期値)
true
tickerHover スライダーの上にマウスを置くと、tickerが一時停止するかどうか設定。
css3のtransitionを使用している場合、この機能は無効
false(初期値)
true
adaptiveHeight 各スライドの高さに基づいてスライダの高さを動的に調整
false(初期値)
true
adaptiveHeightSpeed スライドの高さ遷移時間(単位:ms)
adaptiveHeight:trueの場合にのみ有効
整数を指定
初期値:500
video スライドに動画が含まれている場合は、これをtrueに設定
false(初期値)
true
※jquery.fitvids.js必須
responsive レスポンシブ対応
true(初期値)
false
useCSS css3のtransitionアニメーションを使用。falseの場合、jQuery animate()を使用
true(初期値)
false
preloadImages 画像の読み込みタイミングを指定
‘visible’(初期値) 最初に表示される画像のみ
‘all’ 開始前にすべて
touchEnabled タッチスワイプの有効or無効
true(初期値)
false
swipeThreshold タッチスワイプ判定のための距離を指定
touchEnabled:trueの場合にのみ有効
整数を指定
初期値:50
oneToOneTouch スワイプ動作に要素が連動するようなスライドをさせる
true(初期値)
false
preventDefaultSwipeX タッチスクリーンで、指がスワイプしてもx軸に沿って移動しない
true(初期値)
false
preventDefaultSwipeY タッチスクリーンで、指がスワイプしてもy軸に沿って移動しない
true(初期値)
false
wrapperClass スライダを包有するclass名を指定
初期値:’bx-wrapper’

ページ送り

pager ページ送りを有効or無効
true(初期値)
false
pagerType ページ送りのスタイル
‘full’(初期値) 各スライドに対してページ送りのリンクを生成
‘short’ x/yの形式でページ送りのリンクを生成。例:1/4
pagerShortSeparator pagerType:’short’の場合、ページ送りの分離文字として使用
初期値:’/’
pagerSelector 指定した位置にページ送りを設置可能
jQueryセレクタで指定
pagerCustom ページ送りに使用する親要素を指定。各スライドの要素が含まれる。
初期値:null
buildPager ページ送りの各中身を設定。サムネイルとかに利用できる。
初期値:null

コントロール(右とか左とかに出るアイコンみたいなやつ)

controls 「次へ」「前へ」のコントロールを表示or非表示
true(初期値)
false
nextText 「次へ」コントロールに使用するテキストを指定
文字列で指定
初期値:’Next’
prevText 「前へ」コントロールに使用されるテキストを指定
文字列で指定
初期値:’Prev’
nextSelector 「次へ」コントロールを設定する要素をjQueryセレクタで指定
初期値:null
prevSelector 「前へ」コントロールを設定する要素をjQueryセレクタで指定
初期値:null
autoControls 「再生」「停止」コントロールを表示or非表示
false(初期値)
true
startText 「再生」コントロールに使用されるテキストを指定
文字列で指定
初期値:’Start’
stopText 「停止」コントロールに使用されるテキストを指定
文字列で指定
初期値:’Stop’
autoControlsCombine 自動スライド時に「停止」した際のコントロールボタンの表示or非表示
false(初期値)
true
autoControlsSelector 自動スライドのコントロールをjQueryセレクタで指定
初期値:null

オートモード

auto スライドをオートモードに設定
false(初期値)
true
stopAutoOnClick 自動スライド中にコントロールをクリックすると自動スライドを停止させる
false(初期値)
true
pause 各自動スライドの待ち時間設定(ミリ秒)
整数を指定
初期値:4000
autoStart スライドを自動的に始めるか否か
true(初期値)
false
autoDirection 自動スライドの方向を指定
‘next’(初期値)
‘prev’
autoHover マウスオーバーすると自動スライドが一時停止するかどうか
false(初期値)
true
autoDelay 自動スライドを開始するまでの時間(ミリ秒)
整数を指定
初期値:0

カルーセルモード

minSlides 表示されるスライドの最小数を指定
整数を指定
初期値:1
maxSlides 表示されるスライドの最大数を指定
整数を指定
初期値:1
moveSlides カルーセル表示のときに移動するスライド数の設定
整数を指定
初期値:0
slideWidth 各スライドの幅
整数を指定
初期値:0
shrinkItems minSlidesやmaxSlidesに基づいてビューポートに合わせて画像を縮小するかどうか
false(初期値)
true

キーボード

keyboardEnabled 表示されているスライダーをキーボードでコントロールするかどうか
false(初期値)
true

アクセシビリティ

ariaLive スライダーにaria-live属性を追加するかどうか
true(初期値)
false
ariaHidden 表示されていないスライダーにaria-hidden属性を追加するかどうか
true(初期値)
false

コールバック

onSliderLoad スライダーが読み込まれた直後に実行
onSliderResize スライダーがリサイズされた直後に実行
onSlideBefore スライドする直前に実行
onSlideAfter スライドした直後に実行
onSlideNext 「次へ」が実行される直前に実行
onSlidePrev 「前へ」が実行される直前に実行

パブリックメソッド

goToSlide 指定された要素へスライドする
goToNextSlide 「次へ」を実行
goToPrevSlide 「前へ」を実行
startAuto 自動スライドの開示
stopAuto 自動スライドの停止
getCurrentSlide 現在表示中のスライドを返す
getSlideCount スライダー内のスライド総数を返す
redrawSlider スライダーを再表示
reloadSlider スライダーをリロード
destroySlider スライダーを初期状態に戻す

まとめ

正直なところ、メソッドとかその辺はもうまったくわかりません。
オプションがあるということで全部調べてみたんですが・・・
JavaScriptはまだまだ勉強中の身なもんで_(:3 」∠)_

これが読めるくらいにはスキルアップしておきたいところ。
最終的にはJavaScript書けるところを目指しますけどねっ(`・ω・´)

以上、ともさんでしたー。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

  2. HTMLコーディング

    EC-CUBE3をローカル環境へインストールしてみよう

    寒い!((((;゚Д゚))))寒すぎてロードバイク諦めかけてるともさんです、こんにちわ。EC-CUBE3のテスト環境を作りたくて、どこに作…

  3. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

  4. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  5. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

  6. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法

    先日会社の人たちと初登山へ行ってきましたが3回ほど盛大にコケてオシリが痛くなったともさんです、こんにちわ。・・・いや、登山楽しかったですよ。次回は…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. HTMLコーディング

    棒グラフをcssで表現してみよう
  2. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編…
  3. Yahoo!タグマネージャーを導入してみよう

    WEB集客

    Yahoo!タグマネージャーを導入してみよう
  4. WEB集客

    競合他社に勝つために、WEB集客の意外な抜け道を見つけよう
  5. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
PAGE TOP