#author("2023-05-26T01:38:42+09:00;2023-03-31T11:07:07+09:00","default:kanateko","kanateko")
#author("2023-05-26T02:10:10+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#ref(swiper.jpg,center,wrap,500x)

#contentsx

*スワイプ操作しやすいスライダープラグイン [#ef45fd92]
#infobox(plugin){{
name=swiper
ver=1.1.2
ver=1.1.3
pukiwiki=1.5.4
update=2023-03-31
update=2023-05-26
}}

ページ内容を任意の範囲で区切って、スワイプ操作に最適化されたスライダーを作成できるプラグイン。
[[Swiper.js>https://swiperjs.com/]]を利用しており、過去に作成した[[slider>../slider]]や[[slidehsow>../slideshow]]と違って動作にjQueryを必要としない。

[[cardプラグイン>../card]]と連携可能。

#clear

#box(label,label-style=full,box-color=blue,title=このプラグインでできること){{
-ページ内容を任意の範囲で区切ってスライドにする。
--複数設置可能
--切り分け用のタグは変更可
-スライダー (swiper) の設定を細かく変更可能
-[[cardプラグイン>自作プラグイン/card]]のスライド化
--プラグインを別途導入する必要あり
-スライダーにクラス名を追加可能
}}


*ダウンロード [#w807f1c9]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|590|c
|2023-05-26|1.1.3|#ul(containerWidthオプションの処理にミスがあったのを修正)|
|2023-03-31|1.1.2|#ul(幅や高さ指定の処理を変更,縦スライドやグリッド表示の処理を改善)|
|2023-03-30|1.1.1|#ul(重複していたオプションを削除,反映されていなかったオプションを修正)|
|~|1.1.0|#ul(cardプラグインとの連携機能を追加,slidesPerGroup関連オプションを追加,breakpoints関連オプションを追加)|
|2023-03-23|1.0.0|#ul(初版作成)|

*セットアップ [#m4ba94e4]
+GitHubからダウンロードした「plugin-swiper」フォルダの中身 (plugin, skin) をPukiWikiのディレクトリに放り込む。
+pukiwiki.ini.phpでマルチラインプラグインを許可する。
#prism(php){{
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}

*プラグイン設定 [#s08795ec]
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(int|\d+)$=COLOR(#62bf4b),^(string|'.+')$|DIR \.=COLOR(#cb643d),^'/.+/'$=COLOR(#df0606),^(bool|true|false)$=COLOR(#463dcb)){{
|~定数名|~型|~初期値|~説明|h
|>|>|>|BGCOLOR(#aaa):~グローバル (PLUGIN_SWIPER_~)|
|BOLD:BGCOLOR(--table-header-td-color):160|CENTER:80|120|400|c
|JS|string|'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js'|SwiperのJS用CDN|
|CSS|string|'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css'|SwiperのCSS用CDN|
|WIKI_CSS|string|SKIN_DIR . 'css/swiper.css'|プラグイン用CSSのパス|
|SPLIT_TAG|string|'#-'|スライド分割用の文字列|
|>|>|>|BGCOLOR(#aaa):~SwiperConfigクラス|
|ENABLE_AUTO|bool|false|デフォルトで自動再生を有効にする|
|ENABLE_GRAB|bool|false|デフォルトでつかむ見た目のカーソルを有効にする|
|ENABLE_LOOP|bool|false|デフォルトでループを有効にする (rewindと排他)|
|ENABLE_NAV|bool|false|デフォルトで前/次の矢印を有効にする|
|ENABLE_REWIND|bool|false|デフォルトで巻き戻りを有効にする (loopと排他)|
|ENABLE_WHEEL|bool|false|デフォルトでマウスホイール操作を有効にする|
|BP_LARGER|int|720|ブレイクポイント (大) (cardとの連携用)|
|BP_SMALLER|int|460|ブレイクポイント (小) (cardとの連携用)|
|DIRECTION|string|'horizontal'|デフォルトのスライド方向 (horizontal, vertical)|
|EFFECT|string|'false'|デフォルトのスライドエフェクト (false, fade, cube, coverflow, flip, cards, creative)|
|PAGINATION|string|'bullets'|デフォルトのページネーションスタイル (false, bullets, dynamic, progressbar, fraction)|
|LOOP_PRIORITY|string|'rewind'|ループ系オプションが競合している場合の優先度 (loop, rewind)|
}}
}}}

*使用方法 [#mfc0e172]
 #swiper([オプション]){{
 スライド1
 #-
 スライド2
 #-
 ︙
 }}

**オプション [#gd8ab5f3]
指定可能なオプションは以下の通り。一部のオプションは省略した名称を使うこともできる。

true/falseで指定可能なオプションは`<オプション名>`のみでも有効化できる。それ以外は`<オプション名>=<値>`で指定する。

Swiperの各オプションの詳細は[[公式ドキュメントを参照>https://swiperjs.com/swiper-api]]。

***Swiperのオプション [#ae6a966c]
#style(class=table_compact){{{
#datatable{{
|~オプション名|~省略型|~名称のみ|~値|~概要|~例|h
|BOLD:120|100|CENTER:100|150|200|100|c
|autoplay|auto|○|true, false, <数値>|自動再生のオンオフ。値でディレイを変更可能 (ms)。|auto=5000|
|autoHeight|-|○|true, false|スライドごとに高さを合わせる。|autoHeight|
|breakpoints|bp|☓|<幅>-<slidesPerView>-<slidesPerGroup>|レスポンシブ用のブレイクポイント設定。"&#124;"で区切って複数指定可能。|760-5-1&#124;420-2-2|
|breakpointsBase|base|☓|window, container|ブレイクポイントの基準とする要素。|base=window|
|centeredSlides|center|○|true, false|アクティブなスライドを中央に表示する。|center|
|direction|-|☓|horizontal, vertical|スライド方向を変更する。|direction=vertical|
|effect|-|☓|false, cube, coverflow, fade, flip|スライド時のエフェクトを変更する。|effect=cube|
|freeMode|free|○|true, false|スライドのスナップを無効化する。|free|
|grabCursor|grab|○|true, false|ホバー時のカーソルをつかむアイコンに変更する。|grab=false|
|grid|-|☓|<数値>, col<数値>, row<数値>|スライドをグリッド表示にする。colやrowの指定がない (数値のみ) 場合は自動的にcol扱い。|grid=2|
|initialSlide|start|☓|<数値>|スライドの初期位置を指定する (0 = 1枚目) 。|start=2|
|loop|-|○|true, false|スライドをループさせる。|loop|
|mousewheelwheel||○|true, false|マウスホイールでスライドを操作可能にする。|wheel|
|navigation|nav|○|true, false|前/次へボタンを表示する。|nav|
|pagination|paging|☓|false, bullets, dynamic, progressbar|ページネーションのスタイルを変更する。|paging=dynamic|
|rewind|-|○|true, false|最後のスライドから最初のスライドまで巻き戻す。|rewind|
|rtl|-|○|true, false|スライドを右から開始する。|rtl|
|scrollbar|-|○|true, false|スクロールバーを表示する。|scrollbar|
|slidesPerGroup|group|☓|auto, <数値>|一度にスライドする枚数を指定する。autoでslidesPerGroupAuto=trueを指定したことになる。|group=3|
|slidesPerGroupAuto|group=auto|○|true, false|スライドする枚数を自動で決定する。|slidesPerGroupAuto=true|
|slidesPerGroupSkip|skip|☓|<数値>|最初から数えて指定した枚数のスライドをslidesPerGroupの対象から除外する。|skip=2|
|slidesPerView|num|☓|auto, <数値>|一度に表示するスライドを指定する。|num=auto|
|spaceBetween|gap|☓|<数値>|スライド間の余白を指定する。|gap=8|
|speed|-|☓|<数値>|スライド速度を指定する (ms) 。|speed=1000|
}}
}}}

***その他のオプション [#je22f737]
#style(class=table_compact){{{
#datatable{{
|~オプション名|~省略型|~名称のみ|~値|~概要|~例|h
|BOLD:120|100|CENTER:100|150|200|100|c
|class|-|☓|<クラス名>|追加のクラスを指定する。|class=table_compact|
|containerHeight|_height|☓|<数値>|スライダーのコンテナの高さを指定する。主に縦スライダー用やグリッド用。|_height=500|
|containerWidth|_width|☓|<数値>|スライダーのコンテナの幅を指定する。|_width=500|
|height|-|☓|<数値>|スライドの高さを指定する。主に縦スライダー用やグリッド用。|height=300|
|plugin|-|☓|card|他のプラグインとの連携を有効にする。|plugin=card|
|width|-|☓|<数値>|スライドの幅を指定する。|width=300|
}}
}}}

*使用例 [#xb398909]
**基本 [#e7d2f54e]
#tab{{{
#:表示
#swiper{{
&ref(1.webp,nolink);
#-
&ref(2.webp,nolink);
#-
&ref(3.webp,nolink);
#-
&ref(4.webp,nolink);
#-
&ref(5.webp,nolink);
}}
#:ソース
 #swiper{{
 &ref(1.webp,nolink);
 #-
 &ref(2.webp,nolink);
 #-
 &ref(3.webp,nolink);
 #-
 &ref(4.webp,nolink);
 #-
 &ref(5.webp,nolink);
 }}
}}}

**ナビゲーション、表示枚数、スライド枚数 [#l634fa22]
#tab{{{
#:表示
#swiper(nav,num=2,group=2,skip=1){{
&ref(1.webp,nolink);
#-
&ref(2.webp,nolink);
#-
&ref(3.webp,nolink);
#-
&ref(4.webp,nolink);
#-
&ref(5.webp,nolink);
}}
#:ソース
 #swiper(nav,num=2,group=2,skip=1){{
 &ref(1.webp,nolink);
 #-
 &ref(2.webp,nolink);
 #-
 &ref(3.webp,nolink);
 #-
 &ref(4.webp,nolink);
 #-
 &ref(5.webp,nolink);
 }}
}}}

**エフェクト、ループ [#z285730a]
#tab{{{
#:表示
#swiper(effect=cube,paging=dynamic,loop){{
&ref(1.webp,nolink);
#-
&ref(2.webp,nolink);
#-
&ref(3.webp,nolink);
#-
&ref(4.webp,nolink);
#-
&ref(5.webp,nolink);
}}
#:ソース
 #swiper(effect=cube,paging=dynamic,loop){{
 &ref(1.webp,nolink);
 #-
 &ref(2.webp,nolink);
 #-
 &ref(3.webp,nolink);
 #-
 &ref(4.webp,nolink);
 #-
 &ref(5.webp,nolink);
 }}
}}}

**縦スライド、ホイール操作 [#e7c8bb4a]
#tab{{{
#:表示
#swiper(direction=vertical,autoHeight,wheel){{
&ref(1.webp,nolink);
#-
&ref(2.webp,nolink);
#-
&ref(3.webp,nolink);
#-
&ref(4.webp,nolink);
#-
&ref(5.webp,nolink);
}}
#:ソース
 #swiper(direction=vertical,autoHeight,wheel){{
 &ref(1.webp,nolink);
 #-
 &ref(2.webp,nolink);
 #-
 &ref(3.webp,nolink);
 #-
 &ref(4.webp,nolink);
 #-
 &ref(5.webp,nolink);
 }}
}}}

**グリッド [#m74d28c4]
#tab{{{
#:表示
#swiper(grid=2,num=2,_height=440,height=210,gap=10){{
&ref(1.webp,nolink);
#-
&ref(2.webp,nolink);
#-
&ref(3.webp,nolink);
#-
&ref(4.webp,nolink);
#-
&ref(5.webp,nolink);
}}
#:ソース
 #swiper(grid=2,num=2,_height=440,height=210,gap=10){{
 &ref(1.webp,nolink);
 #-
 &ref(2.webp,nolink);
 #-
 &ref(3.webp,nolink);
 #-
 &ref(4.webp,nolink);
 #-
 &ref(5.webp,nolink);
 }}
}}}
**カードプラグインとの連携 [#i397f38c]
#tab{{{{
#:表示
#swiper(plugin=card,group=auto,rewind){{{
#card(5){{
#taglist(プラグイン^自作-一覧)
}}
}}}
#:ソース
 #swiper(plugin=card,group=auto,rewind){{{
 #card(5){{
 #taglist(プラグイン^自作-一覧)
 }}
 }}}
}}}}
*追加したい機能 [#t4401ac6]
-スライド追加ボタン
-エフェクト系の詳細設定

*備考 [#j9b82103]
-%%縦スライドやグリッドの挙動が微妙なので要修正。%% v1.1.2である程度改善。

*コメント [#z1b18d10]
#pcomment(reply)