画像スライダー Swiper の使い方・設定(HTML, CSS, JavaScript)

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

無料で商用利用可能な画像スライダー Swiper

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

jQuery も利用しないので軽くて良い．

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

スライダー Swiper の使い方・設置方法

使い方としてはSwiper 公式ページのデモページが分かりやすい．

しかし，IE11 で表示させると右左の矢印が表示されない．
本家のページを IE11 で見てもやっぱり表示されない．

どうやら，Swiper は既に IE には対応していないらしい．
(ちなみにここで使っている Swiper は Ver 6.1.1)

でも，一応矢印を表示させることは出来たので，「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 でも見えるはず．

Swiper を使っていて，IE で矢印が消えることに困っている方は一度試してみてください．