レスポンシブ対応の複数画像スライダープラグイン【Swiper.js】 DAD UNION

Swiper.jsを使って、レスポンシブやスマホ・タブレットのスワイプに対応したスライダー方法をご紹介します。

Contents

レスポンシブやスマホ・タブレットのスワイプに対応したスライダーのCSS記述
レスポンシブやスマホ・タブレットのスワイプに対応したスライダー箇所のHTML記述
Swiper.jsを使った、レスポンシブやスマホ・タブレットのスワイプに対応したスライダーのJavaScritp記述
複数画像スライダーSwiper.jsのデモページ
ソース元：Swiper Demos

レスポンシブやスマホ・タブレットのスワイプに対応したスライダーのCSS記述

※swiper用のswiper-bundle.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>

レスポンシブやスマホ・タブレットのスワイプに対応したスライダー箇所のHTML記述

※スライドエリア（class=”swiper-container mySwiper”）に12個のスライド（class=”swiper-slide”）を用意しました。必要に応じて書き換えてください。

    <!-- 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>

Swiper.jsを使った、レスポンシブやスマホ・タブレットのスワイプに対応したスライダーのJavaScritp記述

※swiper-bundle.jsファイルを読み込みます。Swiper(スライドエリア, {スライドオプション})を設定します。スライドオプションでは1度にスライドする枚数やスピード等の設定が可能です。必要に応じて書き換えてください。

<!-- 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>