複数画像スライダープラグイン【Swiper.js】

レスポンシブやスマホ・タブレットのスワイプに対応したスライダープラグインをご紹介します。
jQueryは不要です。

1．swiper用cssファイル読込とデモ用CSS記述例

※必要に応じて書き換えてください。

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./swiper-bundle.css" />

<!-- Demo styles -->
<style>
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* 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;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

2．スライダー箇所HTMLの記述例

※必要に応じて書き換えてください。

    <!-- Swiper -->
    <div class="swiper-container mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">スライド 1</div>
        <div class="swiper-slide">スライド 2</div>
        <div class="swiper-slide">スライド 3</div>
        <div class="swiper-slide">スライド 4</div>
        <div class="swiper-slide">スライド 5</div>
        <div class="swiper-slide">スライド 6</div>
        <div class="swiper-slide">スライド 7</div>
        <div class="swiper-slide">スライド 8</div>
        <div class="swiper-slide">スライド 9</div>
        <div class="swiper-slide">スライド10</div>
        <div class="swiper-slide">スライド11</div>
        <div class="swiper-slide">スライド12</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

3．swiper Jsファイル読込とJavaScritpの記述

※パラメータでスライド枚数やスピード等の設定が可能です。必要に応じて書き換えてください。
　以下、「ソース元：Swiper Demos」をご参考下さい。

<!-- Swiper JS -->
<script src="./swiper-bundle.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    }
  });
</script>

複数画像スライダーSwiper.jsのデモ

※流用される場合は自己責任でお願いします。
　タグ内のGoogleアナリティクスタグは流用しないで下さい。

ソース元：Swiper Demos