【Swiper】エフェクトに指定することができるスライドタイプ一覧

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperのパラメータにあるエフェクトに指定することができるスライドタイプ一覧をご紹介しています。

「Swiper」ではデフォルトで複数のエフェクトが用意されています。それぞれが素晴らしいアニメーションになっています。また、エフェクトの変更も簡単で「effect」パラメータに特定の値を指定するだけでスライドする際のアニメーションを変更することができます。

「effect」には全部で5つのアニメーションをしていすることができますので、デモを交えながらご紹介していきたいと思います。

では、解説していきます。

共通のHTML・SCSS

これからいくつか「Swiper」で作成したスライダーをご紹介させていただくのですが、HTMLとSCSSはすべて同じものを使用します。同じ記述を複数してしまうとページが長くなってしまいますので、最初に共通のHTMLとSCSSを予めご紹介しておきたいと思います。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>Slide 1</h1></div>
        <div class="swiper-slide"><h1>Slide 2</h1></div>
        <div class="swiper-slide"><h1>Slide 3</h1></div>
        <div class="swiper-slide"><h1>Slide 4</h1></div>
        <div class="swiper-slide"><h1>Slide 5</h1></div>
        <div class="swiper-slide"><h1>Slide 6</h1></div>
    </div>
    
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div> 

SCSS

.swiper-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    
    .swiper-wrapper {
      
      .swiper-slide {
        position: relative;
        
        &:nth-child(1){ background-color: #384878; }
        &:nth-child(2){ background-color: #00c2bc; }
        &:nth-child(3){ background-color: #a8aabc; }
        &:nth-child(4){ background-color: #384878; }
        &:nth-child(5){ background-color: #00c2bc; }
        &:nth-child(6){ background-color: #a8aabc; }
        
        h1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-size: 8vw;
          
        }
      }
    }
}

「Swiper」の公式サイトに開発者指定のコードが記載されていますので、詳しく知りたい方は公式サイトをご参照ください。

では、Swiperのeffectに指定することができるアニメーションをご紹介していきます。

slide

JS

var mySwiper = new Swiper ('.swiper-container', {
  effect: 'slide',
})

fade

JS

var mySwiper = new Swiper ('.swiper-container', {
  effect: 'fade',
})

cube

JS

var mySwiper = new Swiper ('.swiper-container', {
  effect: 'cube',
})

coverflow

JS

var mySwiper = new Swiper ('.swiper-container', {
  effect: 'coverflow',
})

flip

JS

var mySwiper = new Swiper ('.swiper-container', {
  effect: 'flip',
})

最後に

いかがでしたでしょうか。

「Swiper」ではデフォルトで使用できるスライドの種類が多いため、遷移時のアニメーションを簡単に変更することができます。変更するためには「effect」パラメータの値を変更するだけですので、基本的なスライダー以外を使用してい見たい！　という方は本記事の内容を参考に好きなタイプに変更していただければと思います。

以上、Swiperのエフェクトに指定することができるスライドタイプ一覧のご紹介でした！