【SWELL】スライダー（横スクロール含む）を表示させる方法4選

こういった疑問にお答えします。

SWELLでスライダーを表示させる方法4選

記事スライダー

記事スライダーに関しては、以下の記事を参照ください。

あわせて読みたい

【SWELL】記事スライダーを投稿・固定ページに表示させる方法 SWELLで記事スライダーを投稿・固定ページに表示させる方法を知りたいですか？本記事では、SWELLブロックの投稿リストを利用して記事スライダーを投稿・固定ページの好きな場所に表示させる方法を解説しています。SWELLで記事スライダーを投稿・固定ページに表示させたい方は是非ご覧ください。

画像スライダー

完成版

実装方法

管理画面メニューから、「（ブロック挿入ツールを切り替え）」＞「ブロック」＞「ウィジェット」＞「カスタムHTML」を選択します。

下記コードを「カスタムHTML」にコピペします。

<div class="swiper imgSlider__swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
        <div class="swiper-slide"><img src="ここに動画のURLをコピペします。" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

管理画面メニューから、「メディア」＞「ライブラリ」を選択します。

スライダーに表示させたい画像を選択します。

画像を開いた後、「URLをクリックボードにコピー」をクリックします。

コピーした画像を貼り付けます。

この作業を繰り返して画像をコピペしていきます。

「 カスタムJS ＆ CSS」を開いて、CSS用コードに下記コードをコピペします。

.imgSlider__swiper .swiper-slide {
   height: auto;
}
.imgSlider__swiper .swiper-slide img {
   height: 100%;
   object-fit: cover;
   width: 100%;
}

同じく、JS用コードに下記コードをコピペします。

// Swiperを初期化
const swiper = new Swiper('.imgSlider__swiper', {
    loop: true,
    slidesPerView: 1, // スライダーの枚数設定（SP）
    spaceBetween: 16, // スライド間の余白（SP）
    centeredSlides: true, // 対象のスライドを中央寄せするかどうか
    speed: 1500, // スライドのアニメーション速度
    breakpoints: {　// レスポンシブ対応
        960: {
            slidesPerView: 3, // スライダーの枚数設定（PC）
            spaceBetween: 16 // スライド間の余白（PC）
        }
    },
    autoplay: {
        delay: 5000, // スライドが切り替わる間隔
        disableOnInteraction: false // スライダーを操作したときに自動再生を止める
    },
    pagination: { // ページネーションを表示する
        el: '.swiper-pagination',
        type: 'bullets',　//　ページネーションの種類
        clickable: true //　ページネーションをクリックできるかできないか
    },
    navigation: { // 矢印ナビゲーションを表示する
        nextEl: '.swiper-button-next', // 次へボタン
        prevEl: '.swiper-button-prev' // 前へボタン
    },
});

これで「完成版」の動きが再現できていれば完成です。

リッチカラム（横スクロール）

完成版

「リッチカラム」では、様々なブロックを挿入することができます。

実装方法

管理画面メニューから、「（ブロック挿入ツールを切り替え）」＞「ブロック」＞「SWELLブロック」＞「リッチカラム」を選択します。

 （設定）から、「ブロック」＞「設定」内にある「横スクロールで表示する」を有効にします。

これで「完成版」の動きが再現できていれば完成です。

テーブル（横スクロール）

完成版

ヘッダーラベル	ヘッダーラベル	ヘッダーラベル	ヘッダーラベル	ヘッダーラベル	ヘッダーラベル	ヘッダーラベル	ヘッダーラベル
Lorem Ipsum	Lorem Ipsum	Lorem Ipsum	Lorem Ipsum	Lorem Ipsum	Lorem Ipsum	Lorem Ipsum	Lorem Ipsum

実装方法

管理画面メニューから、「（ブロック挿入ツールを切り替え）」＞「ブロック」＞「テキスト」＞「テーブル」を選択します。

 （設定）から、「ブロック」＞「横スクロール設定」を開きます。

横スクロール設定を以下から選択します。

選択してもリッチカラムとは違い編集画面上には「スクロールできます 」と表示されませんが大丈夫です。

「投稿を表示」または「 （プレビュー）＞「新しいタブでプレビュー」から確認すると「スクロールできます 」と表示されています。

これで「完成版」の動きが再現できていれば完成です。