swiper.jsでパララックスありのスライド

slick.js や bxslider.js と並んで swiper.js というスライドショーライブラリが人気らしく、気になって調べてみたところ、パララックスありのスライドも簡単にできるらしいのでメモ。

公式：http://idangero.us/swiper/ （v4.2.2 で作成）

最近は webpack で ECMAScript 2017 を書く練習をしているので、 npmでインストールしました。

$ npm  i -D swiper

jsの読み込みは下記

import './scss/swiper.scss';
import './scss/swiper-setup.scss';
import Swiper from 'swiper';

jQueryを使わない場合、DOMオブジェクトの生成が終わってから処理したいので、 DOMContentLoaded を指定。

window.addEventListener('DOMContentLoaded', function() {

あとは Swiper の内容を指定するだけ。ほぼデモのコードどおりで、parallax: true を指定することで、 data-swiper-parallax 属性でパララックスの動きを調整できる。

var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    effect: 'slide',
    loop: true,
    speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
    parallax: true, //パララックス Edgeではカクツく。will-changeで軽減
    autoplay:true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      clickable: true,  //クリック可否
    },
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  }
);

HTMLコード

背景画像に data-swiper-parallax=“50%” を指定するとパララックスありスライドショーになる

data-swiper-parallax-opacity="0.1"
data-swiper-parallax-scale="0.15"

の指定を入れてみたが、何も変化がなく、どこか間違っているようだけど原因不明なのでコメントアウトにしています。判明したら追記します。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="title" data-swiper-parallax="-500">Slide 1</div>
          <div class="subtitle" data-swiper-parallax="-500" data-swiper-parallax-duration="600">Subtitle</div>
          <div class="text">
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          </div>
          <!-- Opacity parallax 動かない？
          <div data-swiper-parallax-opacity="0.1" >I will change opacity</div>-->
          <!-- Scale parallax 動かない？
          <div data-swiper-parallax-scale="0.15" >I will change scale</div>-->
          <img class="swiper-bg" src="L1.jpg" alt="1" data-swiper-parallax="50%">
        </div>
        <div class="swiper-slide"><img class="swiper-bg" src="L2.jpg" alt="2" data-swiper-parallax="50%"></div>
        <div class="swiper-slide"><img class="swiper-bg" src="L3.jpg" alt="3" data-swiper-parallax="50%"></div>

    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
 
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSS

画像のクラスに absolute 指定と、親コンテナに will-change:transform; を指定しています。 win10 の IE11 と Edge でカクついたので追加しました。
最初画像に object-fit も指定していたのですが、IE11、Edge でレイアウトが崩れたのでやめました。
.swiper-container の width height のサイズに画像は置いた方が良さそうです。

.swiper-container {
  width: 980px;
  height: 300px;
  img{
    width: inherit;
    height: inherit;
  }
}
.swiper-slide{
  overflow: hidden;
  will-change:transform;
}

.swiper-bg{
  position: absolute;
  top:0;
  left:0;
  z-index: -1;
}

FLASK

検索

swiper.jsでパララックスありのスライド

HTMLコード

CSS