#author("2021-07-01T16:57:58+09:00","default:kanateko","kanateko")
#author("2021-07-01T21:00:19+09:00;2021-07-01T16:58:03+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#box(info){{
より多機能な[[sliderプラグイン>自作プラグイン/slider]]を作成しました。
sliderプラグインでは画像以外もスライド表示可能で、さらに詳細な設定も可能です。
#card([[自作プラグイン/slider]])
}}

#contentsx
*画像スライドショー表示プラグイン [#ke30fe8a]
#slideshow(ゲーム一覧/HOD_logo.png,ゲーム一覧/WW3_logo.png,ゲーム一覧/Fallout76_logo.png,ゲーム一覧/GTFO_logo.png,ゲーム一覧/LastYear_logo.png,ゲーム一覧/OTWD_logo.png,speed=2000)

#style(class=summary){{
|>|~slideshow.inc.php|h
|RIGHT:100|150|c
|~製作者|kanateko|
|~ライセンス|GPLv3|
|~動作確認|PukiWiki 1.5.2 ~|
|~最終更新|2020-03-10|
}}

[[slick>http://kenwheeler.github.io/slick/]]を利用した画像スライドショープラグイン
添付した画像を指定してスライドショーに追加できる

slickの設定やcssを弄ることで様々なデザインのスライドショーを表示可能
現在のプラグインの設定は最もシンプルなものにしてある

-このプラグインでできること
--添付画像の表示
--自動再生のON/OFF
--スライド表示時間の変更
#clear

*ダウンロード [#i62b3f12]

最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|2020-03-10|0.8.3|ループ処理にバグが有ったので修正|
|2020-02-10|0.8.2|ソースを整理して公開|

*インストール [#ma9d057e]
+ダウンロードした「slideshow.inc.php」をpluginフォルダに入れる。
+[[slick公式>http://kenwheeler.github.io/slick/]]からslickをダウンロードする。
+ファイルを解凍し、中にある「slick」フォルダをskinフォルダに入れる。
+jQueryを使うので、pukiwiki.skin.phpの<head>~</head>の間に以下の内容を追加する。
#prism(html,false){{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
}}

*使用方法 [#c0927415]
 #slideshow([ファイル名][,speed=<数値>][,auto=false])
-''ファイル名''
拡張子を含んだ画像のファイル名
別ページにある画像も指定可能で、その場合は"<ページ名>/<ファイル名>"とスラッシュで区切る
-''speed=<数値(ms)>''
自動再生時、1つのスライドを表示しておく時間(ms)
500以上から設定可能
設定しない場合はデフォルトで3000(3秒)
-''auto=false''
自動再生をoffにする
デフォルトでonのため自動再生をする場合は設定しなくてOK

引数の順序に決まりはない

例: ページの上部にあるスライドショーの場合
 #slideshow(ゲーム一覧/HOD_logo.png,ゲーム一覧/WW3_logo.png,ゲーム一覧/Fallout76_logo.png,ゲーム一覧/GTFO_logo.png,ゲーム一覧/LastYear_logo.png,ゲーム一覧/OTWD_logo.png,speed=2000)

*追加したい機能 [#ud342f39]
#style(opacity:.2){{{
-動画表示機能
-テキスト表示機能
-スタイル変更機能

マルチライン化してオプションやスタイルを()内、実際に表示する部分を{{}}内で自由に弄る感じにしたい。
}}}

これらの機能は[[sliderプラグイン>自作プラグイン/slider]]にて実装。
引数の指定方法が大きく変わったため別プラグインとして分離。

*コメント [#tcd76a4f]
#pcomment(,10,above,reply)