完全に自己満足の世界ですが、「温泉ブログ(風呂具)♨」をSWELLテーマで作成中!更新をお楽しみに…!

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

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

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

開発者の了さんのツイートより引用

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

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

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

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

6/23現在、以下の実装方法ではSWELLの以下の機能に影響があることがわかっています。

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

これらのパーツにもSwiper.jsが使われているため。他にも、同じページ内に複数のスライダーを設置した場合にも、お互いに影響が出ることがわかっています。後日、記事を修正予定です。

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

目次

サンプル

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

こんな感じです↓↓

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

実装方法

前提知識ですが、SWELLでは元々Swiper.jsのバージョン4.5.0が読み込まれていますので(記事執筆時点)、改めてCDNから読み込んだり、Githubからダウンロードして読み込んだりする必要はありません。

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

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

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

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

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

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

<div class="swiper-container">
    <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>

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

STEP
Swiper基本設定のJavaScriptを書く

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

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

var mySwiper = new Swiper ('.swiper-container', {
  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', //「前へボタン」要素の指定
  },
})

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

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

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

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

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

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

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

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

目次
閉じる