LogoMark.png

jQuery/Slider の変更点


#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 スライダー]]

~
~