【SWELL】複数のバナーをスライダーで自動横スクロールさせる方法

2025年2月17日2025年2月19日

今回は動作デモのように、PCでは3つ表示、タブレットでは2つ表示、スマホでは1つ表示の自動横スクロールするバナー設置です。

動作デモ

固定ページでSwiperを動作させるコードを追加

外観＞テーマエディタファイル＞テーマのための関数functions.phpに追加

add_action('wp_enqueue_scripts', function() {
   if ( is_page() ) {
      wp_enqueue_script('swell_swiper');
      wp_enqueue_style('swell_swiper');
   }
});

Note

投稿ページに設置する場合は2行目の “is_page” を “is_single” に変更。

バナー画像をアップロード

メディア＞新メディアファイルを追加でバナー画像をアップロードして下さい。

アップロード後にバナー画像のファイルのURLを確認。

カスタムHTMLで横スライダー設置

カスタムHTMLブロックに追加

リンク先と画像ファイルのURLを追加

<div class="swiper-area">
  <div class="swiper slider-banner">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
       <a href="#"><img src="画像ファイルのURL"></a>
     </div>
      <div class="swiper-slide">
       <a href="#"><img src="画像ファイルのURL"></a>
     </div>
      <div class="swiper-slide">
       <a href="#"><img src="画像ファイルのURL"></a>
     </div>

   </div><!-- end of .swiper-wrapper -->
    <div class="swiper-button-prev-banner swiper-button-prev"></div>
    <div class="swiper-button-next-banner swiper-button-next"></div>
 </div><!-- end of .swiper -->

</div><!-- end of .swiper-area -->

カスタムCSSに追加

左右のバナー画像送りの “＞” を標準の大きさよりも少し小さくしています。
サイズや色は適宜変更して下さい。

.swiper-button-next-banner, .swiper-button-prev-banner {
    background: rgba(0, 0, 0, .6);
    color: #fff;
    height: 45px;
    width: 30px !important;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    z-index:10;
}

.swiper-button-next-banner:after, .swiper-button-prev-banner:after {
    height:10px;
    width: 10px;
    position: relative;
    -webkit-transform: rotate(45deg) skew(10deg, 10deg);
    transform: rotate(45deg) skew(10deg, 10deg);
}

カスタムJSに追加

動作デモ同様に、PCサイズでは3つ並び、タブレットサイズでは2つ並び、スマホサイズは1つだけ表示するようにしています。

let mySwiperbanner = new Swiper ('.slider-banner', {
  // デフォルトの設定
  slidesPerView: 1,
  spaceBetween:10,
  centeredSlides : true, //スライド中央寄せ
  loop: true,
  autoplay: {
  delay: 3000,
  },
  speed: 1000,
  effect: 'slide',
  // レスポンシブブレーポイント（Swiper のコンテナ幅による設定）
  breakpoints: {
    // Swiper のコンテナ幅が 960px 以上の場合
    960: {
      slidesPerView: 3,
      spaceBetween: 10,
      centeredSlides : true, //スライド中央寄せ
    },
    // Swiper のコンテナ幅が 600px 以上の場合
    600: {
      slidesPerView: 2,
      spaceBetween: 10,
      centeredSlides : false,
    }
  },
  pagination: {
    el: '.swiper-pagination-banner',
    clickable: true,
  },
  navigation: {  //ナビゲーションボタンを表示
    nextEl: ".swiper-button-next-banner",
    prevEl: ".swiper-button-prev-banner"
  },
});

以上で、複数のバナーを自動横スクロールさせる設定となります。
今回は「PCサイズで3つバナーを表示」を基準としております。更にカスタマイズをされたい方は、参考にさせていただきました「しらこのナレッジ」様のサイトにて詳しく紹介されているので、そちらをご確認ください。