初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

誰でも簡単スライドショー!「bxslider」の設置方法【jQuery】

投稿日:2020年1月3日 更新日:

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やページャーをつけたりする機能くらいかと思います。
ではまた。

この記事を書いた人

moga

moga

歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.