【SWELLカスタマイズ】任意の場所へのスライダー(Swiper.js)の実装方法

WordPressテーマの「SWELL」ではスライダーにSwiper.jsが使用されています。

これは私が、仕事で任意の場所にスライダーを実装して欲しいという要望があったのと、あとはフロントエンドエンジニアのフォロワーさんからのオススメもあったので、今回Swiper.jsによるスライダーの実装をやってみました。

以下に、投稿記事固定ページトップページ等の任意の場所に、スライダー実装する方法をまとめまたので見てみてくださいね!

SWELL 2.5.0以降では、必要なときだけSwpierが読み込まれる形に仕様変更になったので、記事中の使い方そのままでは使用ができません。

Swiperを使用するページで、以下のスクリプトswiper.min.jsを読み込ませる必要があります。

<script type='text/javascript' src='/wp-content/themes/swell/assets/js/plugins/swiper.min.js' id='swell_swiper-js'></script>

一番簡単な、Swiperを読み込む方法は(全ページに読み込まれますが)、スマホ用ヘッダーのメニューを使用して、かつループを有効にすることです。

ちなみに、このやり方で実装をすると、よっぽどの濃いカスタマイズをしない限り、SWELLのPjaxBarba.js)によるページ遷移高速化ONにしてもバグは起きないかと思います。
この記事は、どうしてもPjaxを使いたい方向けに書いています。しかしながら、Pjaxを使わない(Prefetchまで)あるいはスライダーを設置したページのみPjaxで遷移させないページ指定していただければ、XO Sliderプラグインを使用してスライダーを実装するほうがコードを書かずに手軽で、学習コストが発生しません。XO Sliderも同じSwiperを使っていて、比較的手軽に設定できますのでおすすめします(スライダーの種類はある程度制限されます)。

目次

サンプル

兎にも角にも、実際に実装したものを見てみましょう。

こんな感じです↓↓

実装方法

SWELLでは上記で記載した通りにしていただけるとSwiper.jsのバージョン6.8.1を読み込むことが可能なので(記事執筆時点)、改めてCDNから読み込んだり、Githubからダウンロードして読み込んだりする必要はありません。

とても簡単なので、ぜひやってみてくださいね!

STEP
メディアに画像をアップロードする

メディアに画像をアップロードしておきましょう。それぞれの画像は縦横比を揃えておきましょう。

画像のURLはそれぞれコピーしておきましょう。

STEP
カスタムHTMLブロックにスライダーのHTMLを書く

カスタムHTMLブロックを使用して、スライダーのHTMLを書きます。

<div class="swiper-container slider1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://tecchan.jp/wp-content/uploads/2020/06/onsen960_NGseitensama.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://tecchan.jp/wp-content/uploads/2020/06/onsen960_gahag-0072592460.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://tecchan.jp/wp-content/uploads/2020/06/onsen960_YAMA_DSC0947.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://tecchan.jp/wp-content/uploads/2020/06/onsen960_gahag-0112613292.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://tecchan.jp/wp-content/uploads/2020/06/onsen960_1833458_l.jpg" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

実際に実装している画面は、こんな感じです。

最初のdivのクラスswiper-containerは共通ですが、その後に別の任意のクラスを必ずあててください

別の任意のクラスをあてないと、SWELLの他のスライダー部分

  • スマホ用ヘッダー
  • トップページのメインビジュアル(スライダー)
  • 記事スライダー

の動きに影響を与えてしまいます。上記のSwiper.jsのスライダーを含め、他に設置したSwiper.jsのスライダーもすべて同じ動きをしてしまいます。ここでは、slider1としています。他のクラスと被らなければ、なんでも良いです。

STEP
Swiper基本設定のJavaScriptを書く

【SWELL】カスタムCSS & JSJSの部分に、下記の通りにSwiper基本設定のJavaScriptを書きます。上記のサンプルと同じスライダーを実装する場合です。スライダーは、HTMLCSSJavaScriptを変更することによって、比較的簡単にカスタマイズすることができます。

※理解しやすいように、コメントをだいぶ丁寧に入れてみました。笑

var mySwiper = new Swiper ('.slider1', {
  loop: true, //最後に達したら先頭に戻るかどうか
  slidesPerView: 1, //一画面での表示スライド枚数(スマホ)
  spaceBetween: 0, //各スライド間の余白の間隔(スペース)(スマホ)
  centeredSlides : true, //対象のスライドを中央寄せするかどうか
  speed: 1000, //各スライド間の移動速度
  breakpoints: {
    600: {
      slidesPerView: 2, //一画面での表示スライド枚数(PC)
      spaceBetween: 5 //各スライド間の余白の間隔(スペース)(PC)
    }
  },
  autoplay: {
    delay: 2000, //自動再生の1枚のスライドを待機する速度
    disableOnInteraction: false, //Swiperのautoplayがクリック・フリック後も止まらないようにする
  },
  pagination: { 
    el: '.swiper-pagination', //ページネーションの要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },
  //ナビゲーションボタン(矢印)表示の設定
  navigation: { 
    nextEl: '.swiper-button-next', //「次へボタン」要素の指定
    prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
  },
})

実際に実装している画面は、こんな感じです。

以下の赤枠の部分に、先ほど作ったCSSのクラスを入力します

先ほどとは異なり、クラスの先頭に必ず「.」を付与し、.slider1などと入力します。

もっとカスタマイズしてみたい…!という人は、Googleで「Swiper.js 使い方」「Swiper.js 実装方法」「Swiper.js カスタマイズ」など検索してみると良いのでは…!と思います。様々なカスタマイズ方法があります。

ちなみに、SWELL開発者さんも自身のブログでSwiper.jsの紹介をされています

以上のやり方で、無事にSWELLで運用中のブログにSwiper.jsのスライダーを実装することができました。

オススメのWordPressテーマ「SWELL」

当サイトでも使用しているWordPressテーマ「SWELL」は、
プログラミングや專門知識がないブログ初心者でも、
簡単にオシャレなサイトが作れます。

現在SWELLを使用中の方は、こちらも注目!

SWELLユーザー必携の情報をブログにまとめました。詳しくはこちら。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WordPress・EC周りをいじるフリーランス。ずっと自作PCを作り続け、外ではSurface使いです。30代・埼玉県民。WordPressテーマ「SWELL」ユーザー。このブログでは、サイト・ブログのカスタマイズ方法などを発信します。

目次
閉じる