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コーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  2. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法

    テイクフォーにジョインして早3ヶ月が経ちましたがあきらか飲む回数が増えてるともさんですこんにちは。・・・前はそんな、毎週飲むとか、なかったンデスヨ…

  3. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  4. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう

    このあいだ社長の大好きなラフロイグというウイスキーを飲ませてもらい独特の匂いに驚きのけぞったともさんです、こんにちは。みなさん、svgって知っ…

  5. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールしてみよう

    あけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr…

  6. HTMLコーディング

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.2リンクオブジェクト編
  2. WEBデザイン

    Photoshopで空模様の画像を作る方法
  3. WEBデザイン

    WordPressのバックアップを取ろう!BackWPUpの使い方
  4. レポート

    グリコードを使ってプログラミングを学んでみた!
  5. コピーライティング

    コピーライティング心理学 そのいち ~バンドワゴン効果~
PAGE TOP