#author("2021-09-25T11:37:32+09:00;2021-06-22T17:01:47+09:00","default:inoue.ko","inoue.ko")
*jQuery Slider / Carousel
スライダー（カルーセル）の活用事例
~
***CONTENTS
#contents2_1
~
**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さんのデモページ>http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html]]
-この例では、画像＜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 スライダー]]
~
~
