Blog

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

2013.03.27
新しいverがいつの間にか公開されていたようで、新しく記事にしました。
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた

webサイトのメインビジュアルやバナーの箇所で使われる便利なプラグインを紹介します。

 

プラグインのダウンロードはこちらから

jQuery content slider carousel image slideshow | bxSlider

 

こちらのいいところはカルーセルスライダーになったり、コンテンツスライダーになったり、どちらでも使用できる所です。

 

まずはDEMOをご覧下さい

DEMO

 

基本的な使い方としては、

 

 

を読み込み、head部分の箇所に

 

でOKです。

 

後ほどでてきますが、イージング効果を使用したい場合、
さらに、

 

を読み込む必要があります。

 

基本的なHTMLは、

 

だけです。

div要素でも可能なので、
コンテンツ毎動かすことができます。

 

DEMOの説明をさせていただきます。

 

1.ページャー、戻る・次へボタン付き

まず、head部分、

Javascript

 

切り替わりのエフェクトは全部で、横スライド、縦スライド、フェイドの3パターンしかありません。

しかし、次のイージング効果を使用すればかなりのパターンになります。

 

2.サムネイルのページャー付き,イージング効果

イージング効果については、 http://gsgd.co.uk/sandbox/jquery/easing/で動きが見れます。

Javascript

 

3.カルーセルスライダー

Javascript

ここで気をつけたいのは、

カルーセルの横幅が、
displaySlideQtyで設定した数値×liの要素のwidthを設定した数値

になることです。

 

デモでは、liの要素のwidthを320pxに設定しているので、960pxになっています。

ですのでカルーセルの場合、CSSで調整が必要になってきそうです。

さらに言うと、下にでてくるページ数はliの数になります。

 

プラグインのダウンロードはこちらから 

jQuery content slider carousel image slideshow | bxSlider

 

3つ合わせたHTMLとCSSです。

 

HTML

 

css

 

 

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ