リッチカラムのスライダー化機能追加（Swiper）

SWELLのリッチカラムブロックに「スライダー化」機能を追加します。

SWELLを使ってて、いつも足りないと思うのが「スライダー」機能。
頑張ってカスタムHTMLでコーディング実装するか、
スライダーのためだけにSnow Monkey Blocks（めちゃ多機能で重い）を入れるか、
使い勝手の良いプラグインを探す旅に出るか…（個人的に、良いものは皆無）

なんて悩んでいませんか！？（私はめっちゃ悩んでました。）

なぜ「リッチカラムのスライダー化」が最強なのか？

通常のスライダープラグインや、他のブロックエディタのスライダー機能には、SWELLユーザーにとって様々な「使いづらさ」がありました。

• 中身の自由度が低い（画像しか使用できない、設定が少ない）
• ブロックエディタで編集できない（管理画面が別）
• 英語で分かりづらい
• 他の一般的なブロックを網羅しているのでSWELLと重複し、重い（Snow Monkey Blocks など）

そんな不満を、SWELLユーザーに親しみのあるリッチカラムが全て解決します。

• 何でも置ける： 画像、テキスト、ボタン、リスト、さらには別のブロックまで。
• デザインはSWELLにお任せ： カラムごとの背景色、枠線などの設定がそのままスライダーの「1枚」になります。
• スマホ対応も完璧： 「PCは3枚、スマホは1枚見せる」といったレスポンシブ設定も、コードをいじらず完結。

---

実装方法

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

コードスニペットをオンにします。

驚くほど簡単な使い方

使い方は至ってシンプル。コードを1行も書く必要はありません。

1. リッチカラムを挿入し、好きなコンテンツを作る。
2. 右側のサイドバーにある「ブロックスタイル」から「スライダー化」を選択。
3. 出現した「スライダー設定」パネルで、矢印の有無や自動再生をポチポチ選ぶだけ！

これまで「スライダーのためだけに重いプラグインを入れて、サイトスピードを犠牲にしていた」という方は、ぜひこの軽さを体感してください。Swiperを最小構成で読み込むため、表示速度への影響も最小限に抑えています。

---

このブロックスタイルでできること

今回のカスタマイズでは、以下の設定をエディター上で自由に変更できるようにしました。

設定項目	内容
表示枚数（PC・SP）	何枚ずつ表示されるか（小数点も可能）
中央揃え（PC・SP）	基準となるスライドを中央揃えにするかどうか （表示枚数小数点の時はオン推奨）
隙間（px）	スライダー同士の隙間（gap）
高さ（PC・SP）	スライダーの高さ指定
比率（PC・SP）	スライダーのアスペクト比を指定
画像フィット	表示領域にどのように合わせるか指定 （CSSの object-fit ）
速度・待機	スライドする速度・待機時間を指定（ms）
無限スライダー	自動で延々とスライドし続けるかどうか
矢印を表示	左右のガイド矢印を表示するかどうか
矢印を外に出す	スライダーと矢印が被らないようにするかどうか
ドットを表示	スライダー下のドットナビを表示するかどうか

---

もう、スライダーに悩む必要はありません！このアドオンは、あなたのスライダー探しの旅を終わらせ、より高次的な提案に注力できる環境を作りだします。

設定が反映されません。

コードスニペットのトグルがオンになっているか確認してください。

画像以外もスライダー化したいです。

コンテンツスライダーとして使いたい場合は、カラム項目の中の要素は、グループブロックで囲ってください。

もっとこうしてほしい…

練習と自走力アップのため、基本的には、ご自身でCSSを当ててみてください。

「頑張ったけど、どうしてもわからない」「毎回このCSSを当ててるなぁ…」という場合は、ご連絡ください。

改善・バージョンアップいたします。