Cacher is the code snippet organizer for pro developers

OVERVIEW

npm install

npm install --save swiper@3.4.2

import

import '../../../node_modules/swiper/dist/css/swiper.css';
import Swiper from 'swiper'

initialize

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  effect: 'coverflow',
  grabCursor: true,
  speed: 200,
  centeredSlides: true,
  slidesPerView: 'auto',
    coverflow: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows : true
  }
});

html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

API

Swiper API

slideTo()

mySwiper.slideTo(index, speed, runCallbacks);

// index - number - index number of slide
// speed - number - transition duration (in ms). Optional
// runCallbacks - boolean - Set it to false (by default it is true)  Optional

TIPS & REFERENCES

リサイズが走るとインスタンスが死ぬのでリセットしてあげる必要あり

var mySwiper = new Swiper('.mySwiper');
mySwiper.on('resize', function () {
  mySwiper.update()
})