Plugin/Slider

九州産業大学 生命科学部

Plugin/Slider

カルーセルスライダー Slick を用いたスライド表示機能
http://kenwheeler.github.io/slick/

slide01.jpgslide02.jpgslide03.jpgslide04.jpgslide05.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 
    という書き方で利用可能です。



サンプル

01.jpg02.jpg03.jpg04.jpg

編集画面内で以下のように記載しています。

#slider(center,70%,v2,2000,1000,01.jpg,02.jpg,03.jpg,04.jpg)




応用

異なるページ(例えば、ページ名「Slide」)に添付された画像を流用して、別のページにスライドを提示するには、以下のように「ページ名/画像ファイル名」を列挙します。

slide01.jpgslide02.jpgslide03.jpgslide04.jpg

編集画面内で以下のように記載しています。

#slider(center,50%,fade,3000,1000,Slide/slide01.jpg,Slide/slide02.jpg,・・・




添付ファイル: file01.jpg 4件 [詳細] file02.jpg 4件 [詳細] file03.jpg 4件 [詳細] file04.jpg 4件 [詳細]
Last-modified: 2020-03-21 (土) 15:55:28