JQueryのスライダープラグイン「bxSlider」が便利!使い方を徹底解説!

WEBサイトを開発していると、スライダーを作りたくなることがあると思います。

そんな時に便利なのが、bx-sliderです!

bx-sliderはJQueryプラグインで、簡単に使える、レスポンシブデザインにも対応している、動画も使えることから、開発者から高い人気を得ています。

使い方

下記がサンプルです。

  • ゲームを実況する男

  • 団結する社会人

  • eスポーツプレイヤー

サンプルコードをご覧ください。中身は適当なので、適宜置き換えてください。

scriptタグにあるスクリプトがbx-sliderに関する記述です。詳細を見てみましょう。

と言ってもやってるのは、クラス(またはid)を指定して、bx-sliderの設定をするだけです。

今回は下記3つのオプションを使用しています。

  • auto
  • pause
  • controls

これ以外にも様々なオプションがあり、自由自在のスライドを作ることができます。

一部を下記に紹介します。全てのオプションは公式リファレンスをチェック!

General

mode

スライド形式を選べる。縦スライド、横スライド、フェードの3種類から選べる。デフォルト値は「’horizontal’」

選択できる値:’horizontal’, ‘vertical’, ‘fade’

speed

スライドするスピードをms形式で指定できる。デフォルト値は「500」

slideMargin

スライダーのコンテンツ部分について、マージンを指定できる。

startSlide

最初のスライドを選択できる。一番目のスライド=0、二番目のスライド=1になる。

randomStart

最初のスライドをランダムに選ぶかを選択できる。デフォルト値は「false」

選択できる値:true, false

slideSelector

スライドさせる要素を選択する。デフォルト値はなし

選択できる値:クラス名(div.slide_nameなど)

infiniteLoop

無限にループさせるか。デフォルト値は「true」

選択できる値:true, false