- たびたび Cocoonテーマのカルーセルの処理が重い(slickプラグインのjQuery)のが気になります。
- 別のプラグインに切り替えてみることにしました。
新規記事の「カルーセル」表示できるプラグインを探します。 - しかし、結論、現状のカルーセルのちょうどよい代替は見つからず。
- また、Cocoonテーマのモバイル用メニューの表示でも jQuery に依存しているので、jQueryに依存しないカルーセルを探す意味がないことに気づきました。
| プラグイン | 合わなかった点 |
|---|---|
| Smart Slider 3 | 複数レイアウトのカルーセルは有料 |
| Slider, Gallery, and Carousel by MetaSlider | 新規記事からカルーセルは有料 |
| XO Slider (旧名: XO Liteslider) | 固定記事・写真のカルーセル用 |
| Carousel, Slider, Gallery by WP Carousel | jQueryを利用している |
| Splide Carousel Block | 写真のカルーセル用 |
プラグインがどのJavaScriptライブラリを利用しているかが大事です1。
| ライブラリ | 備考 |
|---|---|
| slick | 使いやすいが、jQueryを読み込みが必要。 |
| swiper | カスタマイズ性が高く、jQueryに依存しない。 |
| Flickity | jQuery不要で使いやすい。ただ、正式版になったばかりで表示バグが目立つ。 |
| splide | jQuery不要で非常にファイルが軽い |
slickから別のライブラリに移行しようと考えました。
ただ、自サイトを jQueryをオフにした状態で操作していたら、モバイル時にサイドバーのメニューが表示されないことに気づきました。
そもそも、テーマが jQueryを利用している設計なので、あまり神経質に排除しなくてもよいかな、と思うに至りました。
(補足)
QRコードを読み込むと、関連記事を確認できます。



![【未解決】ページのスクロール パフォーマンスを高めるには?[jquery.min.js, PSI]](https://chiilabo.com/wp-content/uploads/2023/07/image-3-39-1024x576.jpg)
![フォームの要素にラベルが関連付けられていません(input#focus_retriever, iframeTracker)[PSI]](https://chiilabo.com/wp-content/uploads/2023/07/image-3-40-1024x576.jpg)