船小屋温泉郷

PluginSlide のバックアップの現在との差分(No.2)

 ▼アクセス ▼サイトマップ ▼ABOUT 


  • 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2018-03-22T17:01:50+09:00","default:funagoya","funagoya")
*Sliderプラグイン
#author("2018-03-23T20:03:39+09:00","default:funagoya","funagoya")
*Plugin Slider
カルーセルスライダー
~

***はじめに

-sliderプラグインを用いることで、任意のページにスライドを掲載できます。

-スライド用の画像は、当該ページに添付する(これが一般的)か、特定のページにアップロードして利用することもできます。
尚、トップページで使用されているサンプルスライドの画像は、このページに添付されています。
-スライド用の画像は、当該ページに添付する(これが一般的)か、特定のページにアップロードして利用することもできます。尚、トップページで使用されているサンプルスライドの画像は、[[images]] に添付されています。

-スライド用の画像の数は任意ですが、ひとつのスライドで用いる画像については、そのサイズが同一になるよう、事前にサイズを調整してからアップロードしてください。

-以下、slider プラグインの記述方法です。
~
~

#hr
~

**Slider プラグイン解説
カルーセルスライダー
~

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

#slider(center,50%,sample01.jpg,sample02.jpg,sample03.jpg,sample04.jpg,sample05.jpg)
#slider(center,50%,images/sample01.jpg,images/sample02.jpg,images/sample03.jpg,images/sample04.jpg,images/sample05.jpg)

~


***書式
 #slider( 位置, 幅, 画像01, 画像02, 画像03,・・・)

-第1引数は、left / center / right のいずれか。center以外は回りこみます。
-第2引数は、親領域に対する幅の%。
-第3引数以降に画像ファイルを列挙します。
画像ファイル自体は、当該ページに添付されていることが前提ですが、
特定のページにまとめて添付して利用することも可能です。
例えば、slide という名前のページにある sample01.jpg 画像は、
 slide/sample01.jpg 
という書き方で利用可能です。

-パラメータが増えると面倒なので、以下の仕様に限定しています。
--自動再生、3秒切り替え
--切り替え時間:0.5秒
--移動:左右方向
--マウスオンで一時停止します
~
~