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

swiper.jpg

スワイプ操作しやすいスライダープラグイン

swiper.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.1.2
動作確認PukiWiki 1.5.4 - 1.5.4
最終更新2023-03-31

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

cardプラグインと連携可能。

  • ページ内容を任意の範囲で区切ってスライドにする。
    • 複数設置可能
    • 切り分け用のタグは変更可
  • スライダー (swiper) の設定を細かく変更可能
  • cardプラグインのスライド化
    • プラグインを別途導入する必要あり
  • スライダーにクラス名を追加可能

ダウンロード

最新: GitHub

日付バージョン備考
2023-03-311.1.2
  • 幅や高さ指定の処理を変更
  • 縦スライドやグリッド表示の処理を改善
2023-03-301.1.1
  • 重複していたオプションを削除
  • 反映されていなかったオプションを修正
1.1.0
  • cardプラグインとの連携機能を追加
  • slidesPerGroup関連オプションを追加
  • breakpoints関連オプションを追加
2023-03-231.0.0
  • 初版作成

セットアップ

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

プラグイン設定

定数名初期値説明
グローバル (PLUGIN_SWIPER_~)
JSstring'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js'SwiperのJS用CDN
CSSstring'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css'SwiperのCSS用CDN
WIKI_CSSstringSKIN_DIR . 'css/swiper.css'プラグイン用CSSのパス
SPLIT_TAGstring'#-'スライド分割用の文字列
SwiperConfigクラス
ENABLE_AUTOboolfalseデフォルトで自動再生を有効にする
ENABLE_GRABboolfalseデフォルトでつかむ見た目のカーソルを有効にする
ENABLE_LOOPboolfalseデフォルトでループを有効にする (rewindと排他)
ENABLE_NAVboolfalseデフォルトで前/次の矢印を有効にする
ENABLE_REWINDboolfalseデフォルトで巻き戻りを有効にする (loopと排他)
ENABLE_WHEELboolfalseデフォルトでマウスホイール操作を有効にする
BP_LARGERint720ブレイクポイント (大) (cardとの連携用)
BP_SMALLERint460ブレイクポイント (小) (cardとの連携用)
DIRECTIONstring'horizontal'デフォルトのスライド方向 (horizontal, vertical)
EFFECTstring'false'デフォルトのスライドエフェクト (false, fade, cube, coverflow, flip, cards, creative)
PAGINATIONstring'bullets'デフォルトのページネーションスタイル (false, bullets, dynamic, progressbar, fraction)
LOOP_PRIORITYstring'rewind'ループ系オプションが競合している場合の優先度 (loop, rewind)

使用方法

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

オプション

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

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

Swiperの各オプションの詳細は公式ドキュメントを参照

Swiperのオプション

その他のオプション

使用例

基本

1.webp

2.webp

3.webp

4.webp

5.webp

#swiper{{
&ref(1.webp,nolink);
#-
&ref(2.webp,nolink);
#-
&ref(3.webp,nolink);
#-
&ref(4.webp,nolink);
#-
&ref(5.webp,nolink);
}}

ナビゲーション、表示枚数、スライド枚数

1.webp

2.webp

3.webp

4.webp

5.webp

#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);
}}

エフェクト、ループ

1.webp

2.webp

3.webp

4.webp

5.webp

#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);
}}

縦スライド、ホイール操作

1.webp

2.webp

3.webp

4.webp

5.webp

#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);
}}

グリッド

1.webp

2.webp

3.webp

4.webp

5.webp

#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(plugin=card,group=auto,rewind){{{
#card(5){{
#taglist(プラグイン^自作-一覧)
}}
}}}

追加したい機能

  • スライド追加ボタン
  • エフェクト系の詳細設定

備考

  • 縦スライドやグリッドの挙動が微妙なので要修正。 v1.1.2である程度改善。

コメント

最新の10件を表示しています。 コメントページを参照

  • 枚数を表す点がセンターに表示され、画像は左端詰めなのに対してスワイプがページの横幅いっぱい(空白ごとスワイプされる)になってしまいます
    なにか考えられる原因とかありますでしょうか…?
    _widthのオプションで指定してみましたが変わらずでした -- いちもり 2023-05-25 (木) 22:44:37
    • なんか変な質問になってますね…
      書き直すとこの2点です!
      ・左詰めにできるか
      ・縦のスワイプにしたとき、真横に別の画像を表示させることはできるか -- いちもり 2023-05-26 (金) 01:37:03
      • 確認したところcontainerWidthの指定を受け付ける処理にミスがあったので、修正したバージョンをアップロードしておきました。
        なお、現状スライドの左詰めor右詰めには対応していません (そもそもが画面いっぱいに表示して使用する前提なので) 。ですが、classオプションを使って左に寄せるためのクラスを適用すれば実現可能です。基本的に細かいカスタマイズはこのclassオプションを通して行ってもらう想定です。 -- kanateko 2023-05-26 (金) 02:07:16
    • ありがとうございます!素人質問ばかりで恐縮です… -- いちもり 2023-05-26 (金) 12:46:16