Swiper Vue.js コンポーネント

インストール

Swiper Vue.js プラグインは、メインの Swiper ライブラリの一部として NPM を介してのみ利用可能です。

  npm i swiper

使い方

swiper/vue は 2 つのコンポーネント Swiper と SwiperSlide をエクスポートします。

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

swiper/modules からインポートされる追加モジュールの一覧を以下に示します。

• Virtual - バーチャルスライドモジュール
• Keyboard - キーボードコントロールモジュール
• Mousewheel - マウスホイールコントロールモジュール
• Navigation - ナビゲーションモジュール
• Pagination - ページネーションモジュール
• Scrollbar - スクロールバーモジュール
• Parallax - パララックスモジュール
• FreeMode - フリーモードモジュール
• Grid - グリッドモジュール
• Manipulation - スライド操作モジュール（コアバージョンのみ）
• Zoom - ズームモジュール
• Controller - コントローラーモジュール
• A11y - アクセシビリティモジュール
• History - 履歴ナビゲーションモジュール
• HashNavigation - ハッシュナビゲーションモジュール
• Autoplay - 自動再生モジュール
• EffectFade - フェード効果モジュール
• EffectCube - キューブ効果モジュール
• EffectFlip - フリップ効果モジュール
• EffectCoverflow - カバフロー効果モジュール
• EffectCards - カード効果モジュール
• EffectCreative - クリエイティブ効果モジュール
• Thumbs - サムネイルモジュール

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>

スタイル

Swiper パッケージには、CSS、Less、SCSS のさまざまなスタイルのセットが含まれています。

• swiper/css - コア Swiper スタイルのみ
• swiper/css/bundle - ナビゲーション、ページネーションなど、すべてのモジュールスタイルを含むすべての Swiper スタイル

モジュールスタイル（バンドルスタイルをすでにインポートしている場合は不要）

• swiper/css/a11y - A11y モジュールに必要なスタイル
• swiper/css/autoplay - 自動再生モジュールに必要なスタイル
• swiper/css/controller - コントローラーモジュールに必要なスタイル
• swiper/css/effect-cards - カード効果モジュールに必要なスタイル
• swiper/css/effect-coverflow - カバフロー効果モジュールに必要なスタイル
• swiper/css/effect-creative - クリエイティブ効果モジュールに必要なスタイル
• swiper/css/effect-cube - キューブ効果モジュールに必要なスタイル
• swiper/css/effect-fade - フェード効果モジュールに必要なスタイル
• swiper/css/effect-flip - フリップ効果モジュールに必要なスタイル
• swiper/css/free-mode - フリーモードモジュールに必要なスタイル
• swiper/css/grid - グリッドモジュールに必要なスタイル
• swiper/css/hash-navigation - ハッシュナビゲーションモジュールに必要なスタイル
• swiper/css/history - 履歴モジュールに必要なスタイル
• swiper/css/keyboard - キーボードモジュールに必要なスタイル
• swiper/css/manipulation - 操作モジュールに必要なスタイル
• swiper/css/mousewheel - マウスホイールモジュールに必要なスタイル
• swiper/css/navigation - ナビゲーションモジュールに必要なスタイル
• swiper/css/pagination - ページネーションモジュールに必要なスタイル
• swiper/css/parallax - パララックスモジュールに必要なスタイル
• swiper/css/scrollbar - スクロールバーモジュールに必要なスタイル
• swiper/css/thumbs - サムネイルモジュールに必要なスタイル
• swiper/css/virtual - バーチャルモジュールに必要なスタイル
• swiper/css/zoom - ズームモジュールに必要なスタイル

Less スタイルの場合は、インポートパスで css を less に置き換えてください（例：）。

import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

SCSS スタイルの場合は、インポートパスで css を scss に置き換えてください（例：）。

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

Swiper プロパティ

Swiper Vue.js コンポーネントは、すべての Swiper パラメータをコンポーネントプロパティとして受け取り、さらにいくつかの追加プロパティを受け取ります。

Swiper イベント

Swiper コンポーネントは、Swiper インスタンスをできるだけ早く返す追加の swiper イベントを含め、すべての Swiper イベントをサポートします。例：

<swiper @swiper="..." @slideChange="..." @reachEnd="..." ...></swiper>

SwiperSlide プロパティ

SwiperSlide スロットプロパティ

SwiperSlide コンポーネントには、次のスロットプロパティがあります。

• isActive - 現在のスライドがアクティブな場合は true
• isPrev - 現在のスライドがアクティブなスライドの前のスライドの場合は true
• isNext - 現在のスライドがアクティブなスライドの次のスライドの場合は true
• isVisible - 現在のスライドが表示されている場合は true（watchSlidesProgress Swiper パラメータを有効にする必要があります）
• isDuplicate - 現在のスライドが複製スライドの場合（loop モードが有効な場合）。例：

<swiper>
  <swiper-slide v-slot="{ isActive }">
    <div>Current slide is {{ isActive ? 'active' : 'not active' }}</div>
  </swiper-slide>
</swiper>

useSwiper

Swiper Vue は、Swiper 内のコンポーネントで Swiper インスタンスを簡単に取得するための useSwiper フックを提供します。

<!-- some-inner-component.vue -->
<template>
  <button @click="swiper.slideNext()">Slide to the next slide</button>
</template>
<script>
  import { useSwiper } from 'swiper/vue';

  export default {
    setup() {
      const swiper = useSwiper();

      return {
        swiper,
      };
    },
  };
</script>

useSwiperSlide

useSwiperSlide は、Swiper スライド内のコンポーネントがスライドデータ（SwiperSlide スロットプロパティと同じデータ）を取得するためのもう 1 つのフックです。

<!-- some-inner-component.vue -->
<template>
  <p>Current slide is {{swiperSlide.isActive ? 'active' : 'not active'}}</p>
</template>
<script>
  import { useSwiperSlide } from 'swiper/vue';

  export default {
    setup() {
      const swiperSlide = useSwiperSlide();

      return {
        swiperSlide,
      };
    },
  };
</script>

スロット

Swiper Vue.js コンポーネントは、コンテンツの配信に「スロット」を使用します。4 つのスロットが利用可能です。

• container-start - 要素は swiper-container の先頭に追加されます。
• container-end （デフォルト）- 要素は swiper-container の末尾に追加されます。
• wrapper-start - 要素は swiper-wrapper の先頭に追加されます。
• wrapper-end - 要素は swiper-wrapper の末尾に追加されます。

例：

<swiper>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <template v-slot:container-start><span>Container start</span></template>
  <template v-slot:container-end><span>Container end</span></template>
  <template v-slot:wrapper-start><span>Wrapper start</span></template>
  <template v-slot:wrapper-end><span>Wrapper end</span></template>
</swiper>

次のようにレンダリングされます：

<div class="swiper">
  <span>Container start</span>
  <div class="swiper-wrapper">
    <span>Wrapper start</span>
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <span>Wrapper end</span>
  </div>
  <span>Container end</span>
</div>

バーチャルスライド

ここでのバーチャルスライドのレンダリングは、Vue.js によって完全に処理され、:virtual="true" プロパティの設定とスライドへの virtualIndex の設定以外は何も必要ありません。

<template>
  <swiper :modules="[Virtual]" :slides-per-view="3" :space-between="50" virtual>
    <swiper-slide
      v-for="(slideContent, index) in slides"
      :key="index"
      :virtualIndex="index"
      >{{slideContent}}</swiper-slide
    >
  </swiper>
</template>
<script>
  import { Virtual } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },

    setup() {
      // Create array with 1000 slides
      const slides = Array.from({ length: 1000 }).map(
        (el, index) => `Slide ${index + 1}`
      );
      return {
        slides,
        Virtual,
      };
    },
  };
</script>

コントローラー

コントローラーでは、ある Swiper インスタンスを別の Swiper インスタンスに渡す必要があります。

<template>
  <!-- Main Swiper -> pass controlled swiper instance -->
  <swiper
    :modules="[Controller]"
    :controller="{ control: controlledSwiper }"
    ...
  >
    ...
  </swiper>

  <!-- Controlled Swiper -> store swiper instance -->
  <swiper :modules="[Controller]" @swiper="setControlledSwiper" ...>
    ...
  </swiper>
</template>
<script>
  import { ref } from 'vue';
  import { Controller } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const controlledSwiper = ref(null);
      const setControlledSwiper = (swiper) => {
        controlledSwiper.value = swiper;
      };
      return {
        Controller,
        controlledSwiper,
        setControlledSwiper,
      };
    },
  };
</script>

双方向制御（両方の Swiper が互いに制御する場合）では、次のようになります。

<template>
  <swiper
    :modules="[Controller]"
    @swiper="setFirstSwiper"
    :controller="{ control: secondSwiper }"
    ...
  >
    ...
  </swiper>
  <swiper
    :modules="[Controller]"
    @swiper="setSecondSwiper"
    :controller="{ control: firstSwiper }"
    ...
  >
    ...
  </swiper>
</template>
<script>
  import { ref } from 'vue';
  import { Controller } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const firstSwiper = ref(null);
      const secondSwiper = ref(null);
      const setFirstSwiper = (swiper) => {
        firstSwiper.value = swiper;
      };
      const setSecondSwiper = (swiper) => {
        secondSwiper.value = swiper;
      };

      return {
        Controller,
        firstSwiper,
        secondSwiper,
        setFirstSwiper,
        setSecondSwiper,
      };
    },
  };
</script>

サムネイル

コントローラーと同様に、サムネイルインスタンスを保存し、メインギャラリーに渡す必要があります。

<template>
  <!-- Main Swiper -> pass thumbs swiper instance -->
  <swiper :modules="[Thumbs]" :thumbs="{ swiper: thumbsSwiper }" ...>
    ...
  </swiper>

  <!-- Thumbs Swiper -> store swiper instance -->
  <!-- It is also required to set watchSlidesProgress prop -->
  <swiper
    :modules="[Thumbs]"
    watch-slides-progress
    @swiper="setThumbsSwiper"
    ...
  >
    ...
  </swiper>
</template>
<script>
  import { ref } from 'vue';
  import { Thumbs } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const thumbsSwiper = ref(null);
      const setThumbsSwiper = (swiper) => {
        thumbsSwiper.value = swiper;
      };
      return {
        Thumbs,
        thumbsSwiper,
        setThumbsSwiper,
      };
    },
  };
</script>

効果

次の効果が利用可能です。

• フェード
• キューブ
• カバフロー
• フリップ
• カード
• クリエイティブ

効果を使用するには、まず効果をインポートしてインストールする必要があります（他のすべてのモジュールと同様）。

実行中の 効果デモはこちらで確認できます。

完全なフェード効果の例

<template>
  <swiper :modules="[EffectFade]" effect="fade">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  import { EffectFade } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  import 'swiper/css';
  import 'swiper/css/effect-fade';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        EffectFade,
      };
    },
  };
</script>

次は？

ご覧のとおり、Swiper を Web サイトやアプリに統合するのは非常に簡単です。次は、次のステップです。

• API ドキュメント に進んで、すべての Swiper API とその制御方法の詳細をご覧ください。
• 利用可能なデモをご覧ください。
• Swiperについて質問がある場合は、StackOverflowまたはSwiper Discussionsで質問してください。
• バグを見つけた場合は、GitHubでIssueを作成してください。
• サポートが必要な場合は、Swiper Patrons向けのプライベートDiscordサポートチャットルームがあります。