自作プラグイン/slider

2021-07-28 (水) 17:25:13
slider.jpg

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

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

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

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

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

ダウンロード

最新: GitHub

日付バージョン備考
2021-07-281.2bcardプラグインのバージョンアップに対応
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>
    
  5. pukiwiki.ini.phpでマルチラインプラグインを許可する。
     define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
    
 

一部のオプションを動作させるためには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(自作)
}}
}}}
自作プラグイン/ac ac マルチライン部分を折りたたみ、指定した見出し部分をクリックorタップすることで展開するプラグイン。プラグイン名は "accordion" から。 折りたたみプラグインといえば昔からよく使われるregionプラグインがあるが、これは開閉用の小さなボタンをピンポイントで押さないと動作しないため、より使いやすいものを新たに作成した。 以前にも同じ理由で似たようなプラグ 2021-07-26 2021-07-26 (月) 22:31:14
自作プラグイン/bar bar ゲームのステータス画面などでよく見るバーグラフを表示するためのプラグイン。 cssなしでスタイルを変更できる。 このプラグインでできること 0~100%のバーグラフを表示 バーの左右にラベルを表示 ラベルの大きさや色の変更 バーの色、バー背景の色を変更 バーの幅や高さ変更 最新: GitHub ダウンロードした「bar.inc.php」をpluginフォルダ 2021-03-09 2021-03-09 (火) 07:23:14
自作プラグイン/box box 注意やインフォメーション、引用など、事前に用意されている様々なデザインのボックスを利用できるプラグイン。 :このプラグインでできること| 視覚的にわかりやすいデザインボックスを表示する 一部のボックスには追加のオプションあり 高さや幅を変更可能 このプラグインは現在公開されていません。 プラグインの機能としてはクラスを追加しているだけで、実態はほ 2021-07-08 2021-07-08 (木) 03:03:39
自作プラグイン/card card 指定範囲のリンクを全てブログカード風のリンクに置き換える事ができる。#lsなどページを一覧表示するプラグインと組み合わせることで、ブログの記事一覧のようなページが作れる。 このプラグインでできること 指定範囲内にあるリンクを全てブログカード風に変換する。 変換したカードを指定したカラム数で表示する。 (1~6) サムネイルのキャッシュを作成し、表示を高速化する。 リン 2021-10-04 2021-10-04 (月) 09:05:03
自作プラグイン/expand expand こんな感じで指定した領域を折りたたみ表示するプラグインです。 details>及び<summary>タグを使用して、任意の範囲を折りたたんで表示できるプラグイン。 regionプラグインの代替として作成。 なおIEとEdgeではdetailsが未対応なので折りたたまれない。 このプラグインでできること 見出し (summary) の指定 見出しの色変更 見出しのサイズ 2020-02-12 2020-02-12 (水) 18:24:16
自作プラグイン/fa fa Font Awesomeのアイコンを表示するプラグイン。フリー版Font Awesome 5 (v5.15.3) での使用を想定。サイズ変更やアニメーションといったFont Awesomeのオプションも使用可能で、クラス名で指定するか、引数として設定することができる。 :このプラグインでできること| Font Awesomeのアイコンを表示する Solid、Reg 2021-07-26 2021-07-26 (月) 22:27:16
自作プラグイン/fig fig refプラグインにキャプションを付ける機能を追加したようなプラグイン。ただし、ブロック型の場合はfigureタグを使用しているため、若干使い道が異なる。 figure要素は自己完結型のコンテンツであるべきなので、主に無くても文脈の理解に影響しないような画像を表示するのに使用する。 インライン型の場合は (名前に反して) figureタグを使用しないため、どのような 2021-09-30 2021-09-30 (木) 07:34:30
自作プラグイン/flex flex 指定した範囲をタグで区切って横並びに表示するプラグイン。要素がページ幅を超える場合は自動的に折り返して表示する。名前の通りCSS3から導入されたFlexible Box Layout Moduleを利用する。 もともとstyleプラグインを使って"flex"クラスを付与することでこのようなレイアウトを実現していたが、その機能を1つのプラグインとして独立させたものに 2021-07-12 2021-07-12 (月) 13:36:45
自作プラグイン/gallery gallery photoswipeを使って画像ギャラリーを作成するプラグイン。添付した画像を任意の数並べ、クリックorタップでグループごとにモーダルウィンドウでスライド表示する。 :このプラグインでできること| キャプション付きで画像を一覧表示 キャプションの表示/非表示の切替 画像の横幅の変更 画像を正方形や円に切り抜いて表示 一覧の左寄せ、中央揃え、右寄せ指定 クリック 2021-09-29 2021-09-29 (水) 05:23:46
自作プラグイン/infobox infobox 指定したテンプレートページを読み込み、{{{キー}}}を指定した値に置き換えて表示するプラグイン。当Wikiでは元々styleプラグインでinfoboxクラスを指定してインフォボックス (風のテーブル) を作成していたが、それをプラグインとして独立させたものになる。また、このプラグインを使ってインフォボックスを作成すれば、修正が必要な場合にテンプレートを変更するだけで良く 2021-08-04 2021-08-04 (水) 13:13:41
自作プラグイン/marker marker 文章にマーカーでなぞったようなラインを引くプラグイン。文章の目立たせたい部分で使用する。 :このプラグインでできること| 文章にマーカー風のラインを引く マーカーの色を指定可能 文章 オプションで色を指定可能。 色指定を省略した場合 (上のような書き方) は自動的に黄色になる。 :red, orange, yellow, g 2021-07-04 2021-07-04 (日) 21:54:41
自作プラグイン/slider slider slickを利用したスライダー作成プラグイン。画像のみ表示可能だったslideshowプラグインの改良版。 マルチライン部分で指定した範囲を任意の位置で切り分けてスライド化する。また、cardプラグインやgalleryプラグインをスライド (カルーセル) 化することも可能。 :このプラグインでできること| 指定範囲を任意の位置で切り分けてスライド化する 複数設 2021-07-28 2021-07-28 (水) 17:25:13
自作プラグイン/slideshow slideshow より多機能なsliderプラグインを作成しました。 sliderプラグインでは画像以外もスライド表示可能で、さらに詳細な設定も可能です。 slickを利用した画像スライドショープラグイン 添付した画像を指定してスライドショーに追加できる slickの設定やcssを弄ることで様々なデザインのスライドショーを表示可能 現在のプラグインの設定は最もシンプルなものにして 2021-07-01 2021-07-01 (木) 16:58:03
自作プラグイン/tab tab ようこそGAMERS WIKIへ 指定した領域をタブで表示切り替えできるようにするプラグイン。 このプラグインでできること ページを任意の範囲で分割してタブ化 タブのラベルは自由に設定可能 分割用のキーワードを変更可能 (デフォルト: #split) 最新: GitHub ダウンロードした「tab.inc.php」をpluginフォ 2020-10-18 2020-10-18 (日) 13:05:41
自作プラグイン/tableif tableif マルチラインで指定したテーブルの中で、正規表現で指定した文字列を含むセルの書式を一括で変更するプラグイン。使える書式は通常通りセルの書式を指定する場合と同じ (、COLOR:、SIZE:など) 。 :このプラグインでできること| 対象のセルを正規表現で指定できる。 通常のセルと同じ方式で書式を指定できる。 最新: GitHub GitHubから「tab 2021-10-18 2021-10-18 (月) 21:51:47
自作プラグイン/tooltip tooltip 任意の語句をホバーorタップすることでツールチップを表示するプラグイン。その語句が指定した設定ページで定義済みであるか、もしくは引数で定義を追加することでツールチップを表示できる。一度引数で定義した語句は同じページ内であれば使いまわし可能。 公式の自作プラグインとして同名のものが公開されているが、これはtitle属性を使ってツールチップを表示する形式のため、スマホで 2021-09-26 2021-09-26 (日) 20:33:28
自作プラグイン/twitter twitter Twitterのタイムラインや特定のツイートを埋め込んで表示するプラグイン。 プラグインを探していた当時、使えるプラグインが残っていなかったため自作。 このプラグインでできること 指定ユーザーのタイムラインを表示 特定のツイートを表示 テーマの変更 (明/暗) 幅と高さの変更 会話形式の非表示 最新: GitHub ダウンロードした「twitter. 2020-03-10 2020-03-10 (火) 14:45:09
自作プラグイン/ul ul 表の中でリスト表示 (ul) したいときが多かったので作成。とりあえず最低限の機能だけ実装。 可能ならconvert_htmlに手を入れてリスト用の書式を追加したほうがいいのかも・・・。 このプラグインでできること 表組みの中で簡易なリスト表示ができる。 PukiWiki記法も使える。 olに切替可能。 最新: GitHub ダウンロードした「ul.inc 2021-03-26 2021-03-26 (金) 22:02:58
自作プラグイン/youtube youtube 既存のプラグイン(pukiwiki)だと機能が少なかったため、勉強も兼ねて一から新しく作ったもの。 iframeを使用するので要PukiWiki 1.5.2以上。 オプションで様々なパラメータを指定することができ、複数タイプの動画リストにも対応している。 このプラグインでできること YouTube動画の埋め込み (iframe) 再生リストの埋め込み (自動判別) 指定ユー 2021-10-12 2021-10-12 (火) 16:08:19

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