2019.01.23

Swiper を使ってスライダーを実装

Swiper 使ってみた

Swiper

jQuery 不要のスライダー

Swiper のインストール

$ npm i -D swiper

// index.js

import Swiper from "swiper";

window.addEventListener(
  "DOMContentLoaded",
  function() {
    var mySwiper = new Swiper(".swiper-container", {
      loop: true,

      // If we need pagination
      pagination: {
        el: ".swiper-pagination"
      }
    });
  },
  false
);

// style.scss

@import "~swiper/dist/css/swiper.min.css";

.swiper-container {
  padding-bottom: 50px; // padding-bottomを設定してページネーションを写真の下側に出した

  img {
    width: 90%;
  }

  .swiper-pagination-bullets {
    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      margin: 0 4px;
      border: solid 4px #8e714c;
      background: transparent;
      opacity: 1;

      &-active {
        background: #8e714c;
      }
    }
  }
}

//- index.pug

.swiper-container
  .swiper-slide
    img(src="http://via.placeholder.com/300x300")
  .swiper-slide
    img(src="http://via.placeholder.com/300x300")
  .swiper-slide
    img(src="http://via.placeholder.com/300x300")
  .swiper-pagination

写真の外側にページネーションを出したくていろいろ調べた。

.swiper-container に padding-bottom を設定することで解決した。

hene.dev

Swiper を使ってスライダーを実装

Swiper 使ってみた

Swiper

参考