カテゴリ:プラグイン 自作 追加

slider.jpg

スライダー (カルーセル) 作成プラグイン

slider.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.2
動作確認PukiWiki 1.5.3 ~
最終更新2021-06-29

slickを利用したスライダー作成プラグイン。画像のみ表示可能だったslideshowプラグインの改良版。

マルチライン部分で指定した範囲を任意の位置で切り分けてスライド化する。また、cardプラグインgalleryプラグインをスライド (カルーセル) 化することも可能。

このプラグインでできること
  • 指定範囲を任意の位置で切り分けてスライド化する
    • 複数設置可能
    • 切り分け用のタグは変更可
  • スライダー (slick) の設定を細かく変更可能 (後述)
    • レスポンシブ設定もあり
  • cardプラグインgalleryプラグインのスライド (カルーセル) 化
    • 両プラグインを別途導入する必要あり
  • スライダーにクラス名を追加可能

ダウンロード

最新: GitHub

日付バージョン備考
2021-06-291.2クラス名を自由に追加できる機能を追加
1.1cardプラグインgalleryプラグインとの連携機能を追加
2021-06-281.0初版作成

インストール

  1. ダウンロードした「slider.inc.php」をpluginフォルダに入れる。
  2. slick公式からslickをダウンロードする。
  3. ファイルを解凍し、中にある「slick」フォルダをskinフォルダに入れる。
  4. jQueryを使うので、pukiwiki.skin.phpの<head>~</head>の間に以下の内容を追加する。
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    

一部のオプションを動作させるためにはcardプラグインgalleryプラグインの導入が必要になります。

プラグイン設定

PLUGIN_SLIDER_SPLIT_TAG
スライドを分割するためのタグ。デフォルトは "#-"
PLUGIN_SLIDER_JSON_ENCODE_OPTIONS
json_encode関数用のオプション
PLUGIN_SLIDER_BREAKPOINT
slickのレスポンシブ設定用のブレークポイント。デフォルトは768px

使用方法

#slider([オプション]){{
スライド 1
#-
スライド 2
#-
スライド 3
︙
}}

オプション (slick関連)

各オプションに関する実際の動作はslick公式ドキュメントなどを参照。
オプションを指定する際に型を間違えると (string型以外) エラーが表示されるので注意。

  • bool: true か false
  • int: 数字のみ
  • string: 文字列
オプション動作デフォルト設定例備考
adaptiveHeightスライドの高さを可変にするboolfalseadaptiveHeight=true
arrows左右の矢印の表示するbooltruearrows=falseスマホ表示だと自動で非表示になる
autoplay自動でスライドさせるboolfalseautoplay=true
autoplaySpeed自動でスライドさせるまでの秒数 (ms)int3000autoplaySpeed=50000にしてcssEaseをlinearにするとスライドし続ける
centerMode中央表示モードにするboolfalsecenterMode=trueスマホ表示だと自動でオンになる
centerPadding左右のスライドをどれくらい画面に表示するかstring50pxcenterPadding=20%単位は色々使える
cssEaseスライドアニメーションに緩急をつける (イージング)stringeasecssEase=linearease=緩急あり, linear=緩急なし, その他ease-inやease-outなど
dotsスライド下のナビゲーションドットを表示するbooltruedots=false
infiniteスライドをループさせるbooltrueinfinite=false
lazyLoad画像の遅延読み込みstringprogressivelazyLoad=ondemand
pauseOnFocusスライドをインタラクトした際に自動再生を停止するbooltruepauseOnFocus=false
pauseOnHoverスライドをマウスホバーした際に自動再生を停止するbooltruepauseOnHover=false
slidesToShow一度に表示するスライド数int1slidesToShow=2スライド枚数以上に設定すると正しく動作しない
slidesToScroll一度にスライドする枚数int1slidesToScroll=2slidesToShowより多く設定されている場合、slidesToShowが自動的に同じ値になる
speedスライドアニメーションの速度 (ms)int500speed=1000
variableWidthスライドの幅を可変にするboolfalsevariableWidth=truecardやgalleryとの連携時は自動的にオンになる
verticalスライドの方向を縦にするboolfalsevertical=trueこの設定だけだとスワイプ操作が横のままになる
verticalSwipingスワイプの方向を縦にするboolfalseverticalSwiping=true
waitForAnimateスライドアニメーションが終わるまで操作を受け付けないbooltruewaitForAnimate=false

その他のオプション

card
cardプラグインをスライド表示する場合に指定する
gallery
galleryプラグインをスライド表示する場合に指定する
class=クラス名
スライダーにクラス名を追加する

使用例

様々なオプションを指定した際の挙動を確認したい場合はslick公式を見たほうが早いと思われる。

ベーシック

各スライドには文字や画像、表など何でも含めることができる。

#slider{{
CENTER:&size(100){あ};
#-
CENTER:&size(100){い};
#-
CENTER:&size(100){う};
#-
CENTER:&size(100){え};
#-
CENTER:&size(100){お};
}}

オプションを指定してみる

オプションはカンマで区切って指定する

#slider(centerMode=true,centerPadding=25%,speed=1000,autoplay=true,autoplaySpeed=3000){{
#ref(cat1.jpg,center,wrap)
#-
#ref(cat2.jpg,center,wrap)
#-
#ref(cat3.jpg,center,wrap)
}}
cat1.jpg
cat2.jpg
cat3.jpg

他のプラグインとの連携

マルチライン部分に対象のプラグインを含んだ状態でオプションを設定することで連携が可能となる。

cardプラグイン

よく見るカルーセルっぽいのを作れる。

#slider(card,autoplay=true,autoplaySpeed=3000,speed=1000,slidesToScroll=4){{{
#card(4,base){{
#taglist(自作)
}}
}}}

galleryプラグイン

一覧画像をスライド表示する。

#slider(gallery){{{
#gallery(square,nowrap){{
Borderlands 3/1.jpg>Borderlands 3
Back 4 Blood/top.jpg>Back 4 Blood
Gunfire Reborn/top.jpg>Gunfire Reborn
Outriders/top.jpg>Outriders
}}
}}}

追加したい機能など

  • slickのオプションはデフォルトと違う場合だけ書き加えるようにしたほうが見た目スッキリするかなと。今は設定可能な分だけ全部書き連ねているのでかなり長くなっている。

コメント

コメントはありません。 コメント/自作プラグイン/slider