menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/05/14
  • JQuery

オススメ簡単jQueryレスポンシブスライダー bxSliderの使い方

jQueryプラグイン「bxSlider」の設定方法を紹介します。簡単に実装できオプションも豊富、レスポンシブにも対応していてオススメのスライダーです。
bxslider

使用方法

ダウンロード

bxslider.com

準備するファイル

・jquery.js


・jquery.bxslider.js


・jquery.bxslider.css

外部ファイルの読み込み

head内へ以下を追加します。

HTML

「ul」要素にclass名「.bxslider」を指定します。


JavaScript

<head>〜</head>内に以下のScriptを埋め込みます。
複数のオプションがありますのでいくつか記述を紹介します。

ノーマル


mode

「vertical」、「fade」、「horizontal」の3種があります。デフォルトは「horizontal」です


speed

スライド時のスピードを設定できます。デフォルトは「500」


infiniteLoop

スライダーを無限にループさせることができます


startSlide

スタートする画像を指定します。


randomStart

どの画像からスタートするかランダムにすることができます。


captions

キャプションを表示できます。


pager

ページャーの表示・非表示を設定することができます。


controls

コントロールを表示するかどうかを指定します

auto

自動でスライドすることができます。


maxSlides/minSlides

カルーセルの際に表示するスライドの最大数と最低数を設定。


slideWidth

カルーセルの際に表示するスライドの幅を設定。


moveSlides

カルーセルの際に表示するスライドさせる要素の数を指定。

その他のオプションは下記のページで確認してください。

bxslider option

簡単に実装でき、上記以外にも豊富にオプションがあるため、オススメです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11