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

最終更新日: 公開日: 2020年01月

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

無料で商用利用可能な 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>

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

<!-- 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 で矢印が消えることに困っている方は一度試してみてください.

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop