画像スライダー Swiper のススメ (HTML, CSS, JavaScript)

2020年1月31日 HTML&CSS

ホームページで使われる「画像スライダー」は種類が多数あり，どれを使うか迷う．

少し調べてみた限り，Swiper というスライダーがとてもよく出来ていると思ったので紹介する．
(このスライダーはMITライセンスなので，無料での商用利用が可能です．)

下のサンプルコードで作ったもの．(IE で見ると分かるが，左右の矢印が表示されない．)

スライダー Swiper の設置方法

基本的に【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介のページがよく説明されていると思うので，こちらを参照してください．

しかし，IE11 で表示させると右左の矢印が表示されない．
本家のページを IE11 で見てもやっぱり表示されない．
そこで，「IE11で Swiper の矢印を表示させる設定」を一番下に追加して説明します．(2020年1月現在)

まず，Swiper のgithub ページからダウンロードします．
右にある
[Clone or download]
の
[Download ZIP]
を押すと，swiper-master.zip というファイルがダウンロードされる．

以下の場所にある二つのファイルを取り出す．

swiper-master/package/css/swiper.min.css
swiper-master/package/js/swiper.min.js

以下のようにヘッダ部分にでも入れると良い．

<link rel="stylesheet" href="/css/swiper.min.css">
<script src="/js/swiper.min.js"></script>

Swiper のデモページ

最もよく見るのは Loop Mode かなと思うので，そこだけ抜き出すと，

スタイルシート部分

  <!-- Demo styles -->
  <style>
    .swiper-container {
      width: 100%;
      height: 260px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #CCC;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>

スライダー本体部分

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

スクリプト部分(最後の </body> の直前にでも入れておくと良い．)

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

 

IE11で Swiper の矢印を表示させる設定

IE では，矢印のフォントが表示されないので，fontawesome を使って，左右の矢印を表示する方法について説明する．

ちょうど「【SWIPER.JS】スライダーの矢印カスタム」のページで fontawesome を使った方法が見つかったので参考にさせていただいた．

fontawesome 呼び出し部分(例)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

スタイルシート

<style>
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  z-index: 10;
  transform: translate(0%, -50%);
  margin-top: 0;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none
    }
.swiper-button-prev::after,
.swiper-button-next::after {
  position: relative;
  font-family: "Font Awesome 5 Free", sans-serif;
  opacity: 1;
  font-style: normal;
  font-weight: 900;
  font-size: 46px;
}
.swiper-button-prev::after {
  content: "\f104";
}
.swiper-button-next::after {
  content: "\f105";
}
.swiper-button-prev:hover:after,
.swiper-button-next:hover:after{
  color: #FFF;
}
</style>

下のスライダーは InternetExplorer 11 でも見えるはず．