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

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

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

結果的に、大変良かったです(笑)

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

ちなみに、このやり方で実装をすると、よっぽどの濃いカスタマイズをしない限り、SWELLのPjaxBarba.js)によるページ遷移高速化ONにしてもバグは起きないかと思います。基本的に、その前提で作成しています。

本記事のご利用は、自己責任でお願いいたします。

目次

サンプル

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

こんな感じです↓↓

※上記とは別パターンのスライダーは、こちらにございます。

実装方法

前提知識ですが、SWELLでは元々Swiper.jsのバージョン4.5.0が読み込まれていますので(記事執筆時点)、改めて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: 2, //一画面での表示スライド枚数(PC)
  spaceBetween: 5, //各スライド間の余白の間隔(スペース)(PC)
  centeredSlides : true, //対象のスライドを中央寄せするかどうか
  speed: 1000, //各スライド間の移動速度
  breakpoints: {
    600: {
      slidesPerView: 1, //一画面での表示スライド枚数(スマホ)
      spaceBetween: 0 //各スライド間の余白の間隔(スペース)(スマホ)
    }
  },
  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ユーザー必携の情報をブログにまとめました。詳しくはこちら。

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

よかったらシェアしてね!
目次
閉じる