Web制作の現場でよく使うプラグインのご紹介します。
初回の今回は私もお世話になっているプラグイン「bxslider」です。
シンプルでかつ比較的軽量、レスポンシブデザインにも対応している高機能なコンテンツスライダーです。
公式サイトはこちら。
設置方法
設置方法は簡単です。
headタグ内に下記の記述をします。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
次にスクリプトタグをhead内に記載します。
<script>
$(function() {
$('.slider').bxSlider();
});
</script>
次に実装したい箇所のにクラスを割り当てます。
※今回はsliderというクラス名です。
<ul class="slider"> <li><img src="image1.jpg" alt=""></li> <li><img src="image2.jpg" alt=""></li> </ul>
この3ステップで簡単に実装できます。
各ファイルをサーバーにアップする場合はcssとjsの読み込みの箇所を変更してください。
実際に設置したものはコチラになります。 demo
オプションについて
このプラグインにはユーザー側で好きなようにカスタマイズができるようにオプションが用意されています。
配布サイトの英文を日本語訳していますが、間違っている箇所があるかもしれません、その時はごめんなさい。
General
| Name | Default | Description |
|---|---|---|
| mode ‘horizontal’, ‘vertical’, ‘fade’ |
‘horizontal’ | スライド間の遷移の種類 |
| speed integer |
500 | スライド遷移時間（ミリ秒） |
| slideMargin integer |
0 | 各スライド間のマージン |
| startSlide integer |
0 | スライドインデックスの開始（ゼロベース） |
| randomStart boolean |
false | ランダムスライドのスライダーを開始 |
| slideSelector jQuery selector |
” | スライドとして使用する要素（例： ‘div.slide’）。 注：デフォルトでは、bxSliderはスライダー要素のすべての直接の子を使用します |
| infiniteLoop boolean |
true | trueの場合、最後のスライドで[次へ]をクリックすると、最初のスライドに移行します。 |
| hideControlOnEnd boolean |
false | trueの場合、「前」および「次」コントロールは、スライドが最初または最後のときに無効なクラスを受け取ります 注：infiniteLoop：falseの場合にのみ使用 |
| easing if using CSS: ‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’. If not using CSS: ‘swing’, ‘linear’ (see the above file for more options) |
null | 移行中に使用する「easing」のタイプ。 CSSトランジションを使用する場合、transition-timing-functionプロパティの値を含めます。 CSSトランジションを使用しない場合、多くのオプションにplugins / jquery.easing.1.3.jsを含めることができます。 詳細については、http://gsgd.co.uk/sandbox/jquery/easing/を参照してください。 |
| captions boolean |
false | 画像キャプションを含めます。キャプションは画像のタイトル属性から派生します |
| ticker boolean |
false | ティッカーモードでスライダーを使用する（ニュースティッカーと同様） |
| tickerHover boolean |
false | マウスがスライダーの上に移動すると、ティッカーが一時停止します。注：CSSトランジションを使用している場合、この機能は機能しません！ |
| adaptiveHeight boolean |
false | 各スライドの高さに基づいてスライダーの高さを動的に調整します |
| adaptiveHeightSpeed integer |
500 | スライドの高さの遷移時間（ミリ秒）。注：adaptiveHeight：trueの場合にのみ使用 |
| video boolean |
false | スライドにビデオが含まれている場合、これをtrueに設定します。また、plugins / jquery.fitvids.jsを含めます 詳細については、http://fitvidsjs.com/ を参照してください |
| responsive boolean |
true | スライダーの自動サイズ変更を有効または無効にします。固定幅のスライダーを使用する必要がある場合に便利です。 |
| useCSS boolean |
true | trueの場合、CSSトランジションは水平および垂直スライドアニメーションに使用されます（これはネイティブハードウェアアクセラレーションを使用します）。 falseの場合、jQuery animate（）が使用されます。 |
| preloadImages ‘all’, ‘visible’ |
‘visible’ | 「すべて」の場合、スライダーを開始する前にすべての画像をプリロードします。 ‘visible’の場合、スライダーを開始する前に最初に表示されるスライドの画像のみをプリロードします（ヒント：すべてのスライドが同じサイズの場合は ‘visible’を使用します） |
| touchEnabled boolean |
true | trueの場合、スライダーはタッチスワイプトランジションを許可します |
| swipeThreshold integer |
50 | スライドトランジションを実行するためにタッチスワイプで超える必要があるピクセルの量。注：touchEnabled：trueの場合にのみ使用 |
| oneToOneTouch boolean |
true | trueの場合、非フェードスライドはスワイプしながら指をたどります |
| preventDefaultSwipeX boolean |
true | trueの場合、指がスワイプしてもタッチスクリーンはx軸に沿って移動しません |
| preventDefaultSwipeY boolean |
false | trueの場合、指がスワイプしてもタッチスクリーンはy軸に沿って移動しません |
| wrapperClass string |
‘bx-wrapper’ | スライダーをラップするクラス。デフォルトのbxSliderスタイルを使用できないように変更します。 |
Pager
| Name | Default | Description |
|---|---|---|
| pager boolean |
true | trueの場合、ページャーが追加されます |
| pagerType ‘full’, ‘short’ |
‘full’ | ‘full’の場合、各スライドにページャーリンクが生成されます。 ‘short’の場合、x / yページャーが使用されます（例：1/5） |
| pagerShortSeparator string |
‘ / ‘ | pagerType： ‘short’の場合、ページャーはこの値を区切り文字として使用します |
| pagerSelector jQuery selector |
” | 要素をページャに追加するために使用される。デフォルトでは、’bx-viewport’に追加されます |
| pagerCustom jQuery selector |
null | ページャーとして使用される親要素。親要素には、各スライドの要素が含まれている必要があります。動的カルーセルでは使用できません。 |
| buildPager function(slideIndex) |
null | 指定された場合、関数はすべてのスライド要素で呼び出され、戻り値はページャー項目マークアップとして使用されます。 実装の詳細については例を参照してください |
Controls
| Name | Default | Description |
|---|---|---|
| controls boolean |
true | trueの場合、「Next」/「Prev」コントロールが追加されます |
| nextText string |
‘Next’ | 「次へ」コントロールに使用されるテキスト |
| prevText string |
‘Prev’ | 「前へ」コントロールに使用されるテキスト |
| nextSelector jQuery selector |
null | 「次へ」コントロールを設定するために使用される要素 |
| prevSelector jQuery selector |
null | 「Prev」コントロールの設定に使用される要素 |
| autoControls boolean |
false | trueの場合、「開始」/「停止」コントロールが追加されます |
| startText string |
‘Start’ | 「開始」コントロールに使用されるテキスト |
| stopText string |
‘Stop’ | 「停止」コントロールに使用されるテキスト |
| autoControlsCombine boolean |
false | スライドショーの再生中に「停止」コントロールのみが表示され、その逆の場合 |
| autoControlsSelector jQuery selector |
null | 自動制御を設定するために使用される要素 |
| keyboardEnabled boolean |
false | 表示されるスライダーのキーボードナビゲーションを有効にする |
Auto
| Name | Default | Description |
|---|---|---|
| auto boolean |
false | スライドは自動的に移行します |
| stopAutoOnClick boolean |
false | 自動はコントロールとの対話で停止します |
| pause integer |
4000 | 各自動遷移間の時間（ミリ秒単位） |
| autoStart boolean |
true | ロード時にオートショーの再生が開始されます。 falseの場合、「開始」コントロールをクリックするとスライドショーが開始されます |
| autoDirection ‘next’, ‘prev’ |
‘next’ | 自動ショーのスライド遷移の方向 |
| autoHover boolean |
false | マウスがスライダーの上に移動すると、自動表示が一時停止します |
| autoDelay integer |
0 | 自動ショーを開始するまで待機する時間（ミリ秒） |
Carousel
| Name | Default | Description |
|---|---|---|
| minSlides integer |
1 | 表示するスライドの最小数。カルーセルが元のサイズより小さくなると、スライドのサイズが小さくなります。 |
| maxSlides integer |
1 | 表示するスライドの最大数。カルーセルが元のサイズより大きくなると、スライドのサイズが大きくなります。 |
| moveSlides integer |
0 | 移行時に移動するスライドの数。この値は、minSlides以上、maxSlides以下でなければなりません。ゼロ（デフォルト）の場合、完全に見えるスライドの数が使用されます。 |
| slideWidth integer |
0 | 各スライドの幅。この設定は、すべての水平カルーセルに必要です！ |
| shrinkItems boolean |
false | カルーセルは、アイテム全体を表示し、maxSlides / minSlidesに基づいてビューポートに合うように画像を縮小します。 |
Keyboard
| Name | Default | Description |
|---|---|---|
| keyboardEnabled boolean |
false | 目に見えるスライダーのキーボード制御を許可します。スライダーが表示されない場合、キー押下は無視されます。 |
Accessibility
| Name | Default | Description |
|---|---|---|
| ariaLive boolean |
true | Aria Live属性をスライダーに追加します。 |
| ariaHidden boolean |
true | 非表示のスライドにAria Hidden属性を追加します。 |
Callbacks
| Name | Arguments | Description |
|---|---|---|
| onSliderLoad | currentIndex:element index of the current slide | スライダーが完全にロードされた直後に実行されます |
| onSliderResize | currentIndex:element index of the current slide | スライダーのサイズが変更された直後に実行されます |
| onSlideBefore | $slideElement:jQuery element of the destination elementoldIndex:element index of the previous slide (before the transition)newIndex:element index of the destination slide (after the transition) | 各スライド遷移の直前に実行されます。 |
| onSlideAfter | $slideElement:jQuery element of the destination elementoldIndex:element index of the previous slide (before the transition)newIndex:element index of the destination slide (after the transition) | 各スライド遷移の直後に実行されます。関数の引数は、現在のスライド要素です（遷移が完了したとき）。 |
| onSlideNext | $slideElement:jQuery element of the destination elementoldIndex:element index of the previous slide (before the transition)newIndex:element index of the destination slide (after the transition) | 各「次の」スライド遷移の直前に実行されます。関数の引数は、ターゲット（次の）スライド要素です。 |
| onSlidePrev | $slideElement:jQuery element of the destination elementoldIndex:element index of the previous slide (before the transition)newIndex:element index of the destination slide (after the transition) | 各「前」スライド遷移の直前に実行されます。関数の引数は、ターゲット（前の）スライド要素です。 |
Publick Methods
| Name | Description |
|---|---|
| goToSlide | 指定されたスライドインデックスへのスライド遷移を実行します（ゼロベース） |
| goToNextSlide | 「次の」スライド遷移を実行します |
| goToPrevSlide | 「前」スライド遷移を実行します |
| startAuto | オートショーを開始します。自動制御が更新されないようにするには、引数falseを指定します。 |
| stopAuto | オートショーを停止します。自動制御が更新されないようにするには、引数falseを指定します。 |
| getCurrentSlide | 現在アクティブなスライドを返します |
| getSlideCount | スライダー内のスライドの総数を返します |
| redrawSlider | スライダーを再描画します。非表示になった後、非表示のスライダーを再描画する必要がある場合に役立ちます。 |
| reloadSlider | スライダーをリロードします。その場でスライドを追加するときに便利です。オプションの設定オブジェクトを受け入れます。 |
| destroySlider | スライダーを破壊します。これにより、すべてのスライダー要素が元の状態に戻ります（スライダーを呼び出す前）。 |
いろいろなオプションがありますが、よく使うのは自動再生ONやページャーをつけたりする機能くらいかと思います。
ではまた。
関連記事 【bxslider】オプションを複数設定する方法 【bxslider】スライダーを縦の移動に変更する方法 【bxslider】ページャーの丸を非表示にする方法 【bxslider】読み込み時にスライドが一瞬縦に並んでしまうときの簡単な対処法 【bxslider】スライドごとに表示時間（待機時間）を設定する方法
この記事を書いた人
moga
現役のフロントエンドエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。
