jQuery/Slider

jQuery Slider / Carousel

スライダー（カルーセル）の活用事例

CONTENTS

• BxSlider
  • 準備
  • JavaScript 付記
• Slick
  • 準備
• その他
  • SLIDY
  • S5｜meyerweb.com
  • Vegas Background SlideShow｜jQuery/Zepto Plugin

BxSlider

BxSlider｜jQuery Content Slider / Responsive jQuery Slider

はじめに、実装が簡単な bxSlider の事例を紹介します。

• 公式サイト：http://bxslider.com/
• DEMO：https://koichi-inoue.github.io/JQ_bxSlider/
• CODE：https://github.com/koichi-inoue/JQ_bxSlider
  
  

準備

• 1）bxSlider では、ファイルセットのダウンロードは不要です。
  公式サイトの Install > Easy Way に記載のとおり、CDNで利用可能です。

• 2） 構成ファイルの確認
  • index.html　← ココで該当箇所にクラスの定義。
  • style.css
  • script.js　← ココに数行書くだけです。
  • images （素材画像フォルダ）
    
    

JavaScript 付記

• スクリプトの部分については、以下に様々な事例が紹介されています。
  Strongholdさんのデモページ
• この例では、画像＜img＞のみをスライドしていますが、<li>〜</li>の間にはあらゆる要素を配置できるので、プレゼンテーションのスライドのように、「見出し、本文、画像などをまとめたページが次々にスライドする・・」といった使い方も可能です。
  
  
  
  

Slick

Slick｜The last carousel you'll ever need

高機能なスライダー Slick の紹介です。ダウンロードして、必要なファイルを選別する作業と、複数のパラメータの設定が必要になります。

• 公式サイト：http://kenwheeler.github.io/slick/
• DEMO：https://koichi-inoue.github.io/JQ_Slick/
• CODE：https://github.com/koichi-inoue/JQ_Slick
  
  

準備

• 1）ファイルセットのダウンロード
  http://kenwheeler.github.io/slick/　から最新のものをDLして下さい。

• 2） 構成ファイルの確認
  DLしたファイルを解凍すると、slickフォルダが見つかります。
  ここではファイルを以下のように構成します。
  • index.html　← ココで該当箇所にクラスを定義します。
  • style.css
  • script.js　← ココにパラメータの設定を書きます。
  • images （素材画像フォルダ）
  • slick（フォルダ）← この中身はそのまま使う前提です。
    • slick.min.js
    • slick.css
    • slick-theme.css
    • ajax-loader.gif
    • fonts（フォルダ）
      
      
      
      

その他

SLIDY

http://www.w3.org/Talks/Tools/Slidy2/

S5｜meyerweb.com

http://meyerweb.com/eric/tools/s5/　
http://meyerweb.com/eric/tools/s5/s5-intro.html　　Sample

Vegas Background SlideShow｜jQuery/Zepto Plugin

http://vegas.jaysalvat.com/
背景画像をスライドショーする jQuery プラグインです

他にも様々なスライダーがあります。
Google:Javascript スライダー