 |
概要 | ポストに画像カルーセル（複数可）を追加します |
 |
リポジトリ | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
 |
Discourseテーマ初心者の方へ | Discourseテーマの使用方法入門 |
このテーマコンポーネントをインストール
このコンポーネントは、投稿にSplide/Swiperベースの画像カルーセルを追加します。Swiperカルーセルは、サムネイルやさまざまなアニメーションなど、より多くの機能を提供します。
Swiper:
Swiper（サムネイル有効時）:
Splide:
カルーセルを追加するためのボタンがコンポーザーのツールバーに追加されており、プレースホルダー画像が表示されます:
カルーセルのマークアップは以下のようになります:
[wrap="Carousel" autoplay=true/false interval=<期間(ms)>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
カルーセル作成プロセスを簡素化するため、コンポーザーのツールバーのボタンをクリックするとモーダルが表示され（Discourse GIFs TCに感謝！）、カルーセルの設定を選択できます:
その後、[wrap]内にさらに画像を追加できます。
（カルーセルごとの）設定は以下の通りです:
enable_thumbnails: カルーセルの下に画像のサムネイルを表示します。
enable_loop: カルーセルが最後に達したときに最初に戻るようにループさせます。
enable_thumbnail_loop: サムネイルが最後に達したときにループさせます。
画像が少なすぎる場合、この設定を有効にすると、カルーセルがグリッチしたり、ぎこちない動きをしたりする可能性があります。有効にする前に、より多くの画像を用意することをお勧めします。
enable_autoplay: カルーセルを自動再生させます。
autoplay_interval: 次のスライドを再生する前に待機するミリ秒数。enable_autoplayと組み合わせて使用します。空白のままにした場合、デフォルトで5000になります。
設定
（グローバル）設定は以下の通りです:
carousel_software: カルーセルに使用するソフトウェア（Swiper/Splide）。Swiperが推奨されており、デフォルトです。
image_carousel_placeholder: 作成されたカルーセルのデフォルト画像。デフォルトでは、付属の通常のプレースホルダー画像が使用されます:
show_pagination_buttons: 画像間を簡単に移動できるように、カルーセルの下にページネーションドットを表示します。
image_transition_animation: [Swiperのみ] 画像が次に遷移する際のアニメーション。デフォルトは「slide」で、オプションは以下の通りです:
- cube
- fade
- cards
- flip
- slide (デフォルト)
pagination_button_color: ページネーションドットの色。空白のままにすると、Swiper/Splideのデフォルトが使用されます。
active_pagination_button_color: 現在のスライドにあるページネーションドットの色。空白のままにすると、Swiper/Splideのデフォルトが使用されます。
注意事項
このTCにおけるSplideの現在のサポートでは、サムネイルとトランジションアニメーションは利用できません。Splideのサムネイル（より複雑です）については、PRを歓迎します。
縦型サムネイルを実装したい場合、リポジトリに（コメントアウトされた）コードがありますが、あまりうまく機能しません。これ（または現在の実装の拡張）を追加するためのPRを歓迎します。
もう一つ、現在カルーセルの画像を生成モーダル内に追加する方法を検討していますが、こちらで説明されている問題に直面しています。そちらで回答いただけると幸いです！
感謝
@Arkshine氏のこちらのインスピレーションに感謝します。彼がこちらにリポジトリを作成したことは承知していますが、このTCではそのリポジトリを参照しないことにしました。
どなたかの役に立つことを願っています！
まだ投稿していませんが、リッチエディタ（prosemirror）ビューに取り組んでおり、この新しいものをすべて理解するのに時間がかかっています。