LogoMarkWhite.png

Plugin/Slider の変更点


#author("2020-03-17T17:25:05+09:00","default:inoue.ko","inoue.ko")
#author("2020-03-21T15:42:10+09:00;2020-03-17T17:25:05+09:00","default:inoue.ko","inoue.ko")
#navi(../)
~


*Plugin Slider
カルーセルスライダー
~

***概要
jQueryカルーセルスライダー Slick を用いたプラグインです。
http://kenwheeler.github.io/slick/
~

#slider(center,100%,h2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg)
#slider(center,75%,fade,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg,images/04.jpg)

#slider(left,60%,fade,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg)
#slider(left,75%,h2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg,images/04.jpg)

#slider(right,30%,v2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg)
#slider(right,75%,v2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg,images/04.jpg)

#clear
~

編集画面内で以下のように記載しています。
 #slider(center,100%,h2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg)
 #slider(left,60%,fade,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg)
 #slider(right,30%,v2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg)
 #slider(center,75%,fade,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg,images/04.jpg)
 #slider(left,75%,h2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg,images/04.jpg)
 #slider(right,75%,v2,3000,2000,images/01.jpg,images/02.jpg,images/03.jpg,images/04.jpg)
~

***書式
 #slider( 位置, 幅, パターン, 滞留時間, 切替時間, 画像01, 画像02, 画像03,・・・)

-第1引数は、left / center / right のいずれか。center以外は回りこみます。
-第2引数は、親領域に対する幅の%。
-第3引数は、スライドのパターン。
--fade:デフォルトです。何も書かない場合はこれになります。
--h[1-9]:水平にスライドします。右の数字は同時表示数(例:h3)。
--v[1-9]:垂直にスライドします。右の数字は同時表示数(例:v2)。
--同時表示数 < スライドの枚数 であることが前提です。
-第4引数は、スライドが止まって表示されている時間(ms)。
-第5引数は、スライドの切り替えに要する時間(ms)。
-第6引数以降に画像ファイルを列挙します。
画像ファイル自体は、当該ページに添付されていることが前提ですが、特定のページにまとめて添付して利用することも可能です。
例えば、Images という名前のページにある sample01.jpg 画像は、
 images/sample01.jpg 
上記の事例のように、images という名前のページにある sample01.jpg 画像は、
 images/sample01.jpg
という書き方で利用可能です。

~
~
#navi(../)
~