見出し画像

【Swiper】バナー画像をスライド表示させる方法 | アダルトアフィリエイト

ふわり

noteで公開した自作テーマのWordPressサイトに自動でスライドするバナーを追加したので、今回はスライドアニメーションの実装方法を解説します。

CodePenでのデモは👇️になります。

(noteでだと見づらいのでCodePen直で見てもらえればと＆面倒なのでスマホに対応はしてないのでPCで見てください)


背景

FANZAなどのASPではバナー画像を用意してありますが、FANZAの場合画像サイズが最大で600×200のサイズしかなく、そのまま使うには使いづらいかと思います。

そこで、バナー画像をスライダーで並べて表示することで足りない画像サイズを補いましょう。

今回のデモはFANZAの動画ページのバナースライダーを真似て作ってみましたので参考にしてみてください。

Swiperについて

今回はスライダーライブラリーとしてSwiperを使います

CDNの読み込み

今回はCDNを利用しますので以下のコードを<header>の中とかに書いてみてください。

//css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

//JS
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

ここではCSSとJSを読み込みます。

基本のHTML

基本のHTMLは以下のようになります！

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="" alt="">
    </div>
    ...
  </div>
  <!-- ナビゲーション -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
</div>

ここで.swiper .swiper-wrapper .swiper-slide の3つは必須になります。
スライドさせる画像などを.swiper-slideに入れてください。

また今回、ナビゲーションとページネーションを使うので.swiperの中に書いておきましょう。

HTMLとCSS

それでは上記デモのHTMLとCSSを解説します

HTML

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/600/200?random=0" alt="">
    </div>
    ...
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

HTMLは先ほどのコードと一緒ですね

CSS

生CSSだと書くの面倒なのでscssを使ってます

* {
  margin: 0;
  padding: 0;
}

body {
  background: #eee;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.swiper {
  width: 100%;
  position: relative;
  &:hover {
    .swiper-button-prev, .swiper-button-next {
      &::after {
        opacity: 1;
      }
    }
    .swiper-pagination-bullet {
      opacity: 1;
    }
  }
}

.swiper-button-prev, .swiper-button-next {
  color: #fff;
  position: absolute;
  top: 0 !important;
  margin-top: 0 !important;
  width: calc(100% / 4);
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  &::after {
    position: absolute;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s;
  }
}

.swiper-button-prev {
  left: 0;
  &::after {
    right: 18px;
  }
}

.swiper-button-next {
  right: 0;
  &::after {
    left: 18px;
  }
}

.swiper-pagination-bullet {
  background: #D8D8D8;
  opacity: 0;
  transition: opacity 0.3s;
}

.swiper-pagination-bullet-active {
  background: #F8587D;
}

ここでFANZAのバナーを真似するため、左右の画像には半透明を被せるのとクリックで操作できるように.swiper-button-prevと.swiper-button-nextにその役目を負わせてます。クリック操作は後ほどJavaScriptで記載します。

またSwiperの次へ・戻るボタンの矢印はフォントアイコンになってるので色はcolorで、サイズはfont-sizeで変更できます。

また、FANZAバナーはホバーした時にナビゲーションとページネーションが表示されるのでhoverで同様にしました。

JavaScript

最後にSwiperを機能させるJavaScriptを下記のように書きます。

class Banner {
  constructor() {
    // スライダーの要素を取得し、クラスのプロパティとして保存
    this.el = document.querySelector('.swiper');
    // 要素が見つからない場合は処理を中断
    if (!this.el) return;
    // 初期化メソッドを呼び出してスライダーを設定
    this.init();
  }
  
  init() {
    // Swiperライブラリを使用してスライダーを初期化
    const swiper = new Swiper(this.el, {
      // スライダーをループさせる設定（最後のスライドの次に最初のスライドを表示）
      loop: true,
      // ループする際に追加されるスライドの数
      loopAdditionalSlides: 1,
      // 表示するスライド数を2つに設定
      slidesPerView: 2,
      // スライダーを中央に配置する
      centeredSlides: true,
      // スライドの移動速度を1秒（1000ms）に設定
      speed: 1000,
      // 自動再生の設定
      autoplay: {
        // 次のスライドまでの遅延時間を8秒に設定
        delay: 8000,
        // スライダーがユーザー操作によって停止しても自動再生を続ける
        disableOnInteraction: false,
      },
      // ページネーションの設定
      pagination: {
        // ページネーションの要素を指定
        el: '.swiper-pagination',
        // ページネーションのクリックを有効化
        clickable: true,
      },
      // ナビゲーションボタンの設定
      navigation: {
        // 次のスライドに移動するボタンの要素を指定
        nextEl: '.swiper-button-next',
        // 前のスライドに移動するボタンの要素を指定
        prevEl: '.swiper-button-prev',
      },
    });
  }
}

// Bannerクラスのインスタンスを作成してスライダーを初期化
new Banner();

詳しくはコメントとドキュメントを見てほしいですが、今回のようにはみ出している？画像スライダーを作るのには以下のプロパティを追加すれば良いでしょう。

// 表示するスライド数を2つに設定
slidesPerView: 2,
// スライダーを中央に配置する
centeredSlides: true,

あとは自動再生させるにはautoplayを付けます。
ドキュメントなどみていろいろ試してみてください

まとめ

バナーの自動スライダーの例としてFANZAの実装を真似てみました。

Swiperは簡単にスライダーにできるライブラリーなので、応用したら人気記事のスライド表示などもできるようになるのでぜひ試してみてください！

次回はバナー画像をWordPressで管理する方法を解説したいと思います

この記事が参考になれば幸いです☘️

それでは良きアダアフィライフを！

いいなと思ったら応援しよう！