バージョン: v8

ion-slides から Swiper.js への移行

（注意アイコンのSVGは省略）ion-slides をお探しですか？

ion-slides は v6.0.0 で非推奨となり、v7.0.0 で削除されました。Swiper.js ライブラリを直接使用することをお勧めします。移行プロセスについては、以下で詳しく説明します。

最新のタッチスライダーコンポーネントが必要な場合は、Swiper.js をお勧めします。このガイドでは、Ionic Framework アプリケーションで Vue 向け Swiper を設定する方法について説明します。また、ion-slides から公式の Swiper Vue 統合に移行するために必要な移行情報についても説明します。

（注意アイコンのSVGは省略）注

Swiper の Vue コンポーネントは、Swiper の将来のリリースで削除される予定で、Swiper Element が代替となります。ただし、このガイドでは、執筆時点では Vue コンポーネントが最も安定したエクスペリエンスを提供するため、Vue コンポーネントへの移行方法を示しています。

Swiper.js を Ionic Framework で使用するために Swiper の Vue コンポーネントを使用する必要はありません。

はじめに

まず、Ionic の最新バージョンにアップデートしてください

npm install @ionic/vue@latest @ionic/vue-router@latest

Swiper との互換性を向上させるために、Vue CLI 5 にアップグレードすることをお勧めします

vue upgrade --next

完了したら、プロジェクトに Swiper 依存関係をインストールします

npm install swiper@latest

スタイリッシュなスワイプ

次に、基本的な Swiper スタイルをインポートする必要があります。また、Ionic が提供するスタイルもインポートします。これにより、ion-slides で使用したものと同じ CSS 変数を使用して Swiper スタイルをカスタマイズできます。

Swiper を使用しているコンポーネントにスタイルをインポートすることをお勧めします。これにより、必要な場合にのみスタイルがロードされるようになります

<script>
  import { defineComponent } from 'vue';

  import 'swiper/css';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    ...
  });
</script>

（注意アイコンのSVGは省略）注

@ionic/vue/css/ionic-swiper.css をインポートすることは、Swiper.js を Ionic で使用するために必須ではありません。このファイルは ion-slides コンポーネントとの後方互換性のために使用され、スタイルシートで提供される CSS 変数を使用しない場合は安全に省略できます。

セレクターの更新

以前は、ion-slides と ion-slide をターゲットにしてカスタムスタイルを適用できました。これらのスタイルブロックの内容は同じままですが、セレクターを更新する必要があります。以下は、ion-slides から Swiper Vue に移行する際のセレクターの変更点のリストです

ion-slides セレクター	Swiper セレクター
`ion-slides`	`.swiper`
`ion-slide`	`.swiper-slide`

プリプロセッサ（オプション）

SCSS または Less スタイルを使用している開発者の場合、Swiper はこれらのファイルのインポートも提供します。

Less スタイルの場合は、Swiper のインポートパスで css を less に置き換えます

import 'swiper/less';
import '@ionic/vue/css/ionic-swiper.css';

SCSS スタイルの場合は、Swiper のインポートパスで css を scss に置き換えます

import 'swiper/scss';
import '@ionic/vue/css/ionic-swiper.css';

コンポーネントの使用

Swiper は Swiper と SwiperSlide の 2 つのコンポーネントをエクスポートします。Swiper コンポーネントは IonSlides に相当し、SwiperSlide は IonSlide に相当します。

これらのコンポーネントは swiper/vue からインポートされ、Vue コンポーネントに提供されます

<template>
  <ion-page>
    <ion-content>
      <swiper>
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>

<script>
  import { defineComponent } from 'vue';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage } from '@ionic/vue';

  import 'swiper/css';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: {
      Swiper,
      SwiperSlide,
      IonContent,
      IonPage,
    },
  });
</script>

モジュールの使用

デフォルトでは、Vue 向け Swiper は追加のモジュールをインポートしません。ナビゲーションやページネーションなどのモジュールを使用するには、最初にインポートする必要があります。

ion-slides には、ページネーション、スクロールバー、自動再生、キーボード、ズームの各モジュールが自動的に含まれていました。このガイドでは、これらのモジュールをインストールする方法を説明します。

まず、swiper パッケージからモジュールと対応する CSS ファイルをインポートする必要があります

<template>
  <ion-page>
    <ion-content>
      <swiper>
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage } from '@ionic/vue';

  import 'swiper/css';
  import 'swiper/css/autoplay';
  import 'swiper/css/keyboard';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  import 'swiper/css/zoom';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: { Swiper, SwiperSlide, IonContent, IonPage },
  });
</script>

ここから、swiper コンポーネントの modules プロパティを使用して、これらのモジュールを Swiper に提供する必要があります

<template>
  <ion-page>
    <ion-content>
      <swiper :modules="modules">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage } from '@ionic/vue';

  import 'swiper/css';
  import 'swiper/css/autoplay';
  import 'swiper/css/keyboard';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  import 'swiper/css/zoom';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: { Swiper, SwiperSlide, IonContent, IonPage },
    setup() {
      return {
        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
      };
    },
  });
</script>

最後に、適切なプロパティを使用してこれらの機能を有効にすることができます

<template>
  <ion-page>
    <ion-content>
      <swiper :modules="modules" :autoplay="true" :keyboard="true" :pagination="true" :scrollbar="true" :zoom="true">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage } from '@ionic/vue';

  import 'swiper/css';
  import 'swiper/css/autoplay';
  import 'swiper/css/keyboard';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  import 'swiper/css/zoom';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: { Swiper, SwiperSlide, IonContent, IonPage },
    setup() {
      return {
        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom],
      };
    },
  });
</script>

（注意アイコンのSVGは省略）注

モジュールの完全なリストについては、https://swiper.dokyumento.jp/vue#usage を参照してください。

IonicSlides モジュール

ion-slides を使用すると、Ionic は数十の Swiper プロパティを自動的にカスタマイズしました。これにより、モバイルデバイスでスワイプしたときにスムーズなエクスペリエンスが実現しました。Swiper を直接使用する場合も、これらのプロパティが設定されるように、IonicSlides モジュールを使用することをお勧めします。ただし、このモジュールは、Ionic で Swiper.js を使用するために必須ではありません。

IonicSlides によって設定されるプロパティを確認し、カスタマイズするプロパティを決定することをお勧めします。

@ionic/vue から IonicSlides モジュールをインポートし、modules 配列の最後の項目として渡すことで、インストールできます

<template>
  <ion-page>
    <ion-content>
      <swiper :modules="modules" :autoplay="true" :keyboard="true" :pagination="true" :scrollbar="true" :zoom="true">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';

  import 'swiper/css';
  import 'swiper/css/autoplay';
  import 'swiper/css/keyboard';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  import 'swiper/css/zoom';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: { Swiper, SwiperSlide, IonContent, IonPage },
    setup() {
      return {
        modules: [Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides],
      };
    },
  });
</script>

（注意アイコンのSVGは省略）注

IonicSlides モジュールは、配列の最後のモジュールでなければなりません。これにより、ページネーション、スクロールバー、ズームなどのモジュールの設定が自動的にカスタマイズされます。

プロパティ

Swiper オプションは、ion-slides の options オブジェクトではなく、<swiper> コンポーネントで直接プロパティとして提供されます。

ion-slides を使用するアプリで slidesPerView と loop オプションが設定されているとします

<template>
  <ion-slides :options="{ slidesPerView: 3, loop: true }">
    <ion-slide>Slide 1</ion-slide>
    <ion-slide>Slide 2</ion-slide>
    <ion-slide>Slide 3</ion-slide>
  </ion-slides>
</template>

移行するには、これらのオプションを options オブジェクトから <swiper> コンポーネントに直接プロパティとして移動します

<template>
  <swiper :slides-per-view="3" :loop="true">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

以下は、ion-slides から Swiper Vue に移行する際のプロパティの変更点の完全なリストです

名前	注記
options	各オプションを `<swiper>` コンポーネントに直接プロパティとして設定します。
mode	モードに基づいて異なるスタイルを設定するには、CSS で `.ios .swiper` または `.md .swiper` を使用してスライドをターゲットにすることができます。
pager	代わりに `pagination` プロパティを使用します。ページネーションモジュールのインストールが必要です。
scrollbar	引き続き `scrollbar` プロパティを使用できますが、最初にスクロールバーモジュールをインストールしてください。

（注意アイコンのSVGは省略）注

Swiper Vue で使用可能なすべてのプロパティは、https://swiper.dokyumento.jp/vue#swiper-props にあります。

イベント

Swiper コンポーネントは Ionic Framework によって提供されていないため、イベント名には ionSlide プレフィックスが付きません。

ion-slides を使用するアプリで ionSlideDidChange イベントを使用しているとします

<template>
  <ion-slides @ionSlideDidChange="onSlideChange">
    <ion-slide>Slide 1</ion-slide>
    <ion-slide>Slide 2</ion-slide>
    <ion-slide>Slide 3</ion-slide>
  </ion-slides>
</template>

移行するには、イベントの名前を slideChange に変更します

<template>
  <swiper @slideChange="onSlideChange">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

以下は、ion-slides から Swiper Vue に移行する際のイベント名の変更点の完全なリストです

ion-slides イベント	Swiper イベント
`ionSlideWillChange`	`slideChangeTransitionStart`
`ionSlideDidChange`	`slideChangeTransitionEnd`
`ionSlideDoubleTap`	`doubleTap`
`ionSlideDrag（スライドドラッグ）`	`sliderMove（スライダー移動）`
`ionSlideNextStart（次のスライド開始）`	`slideNextTransitionStart（次のスライド遷移開始）`
`ionSlideNextEnd（次のスライド終了）`	`slideNextTransitionEnd（次のスライド遷移終了）`
`ionSlidePrevStart（前のスライド開始）`	`slidePrevTransitionStart（前のスライド遷移開始）`
`ionSlidePrevEnd（前のスライド終了）`	`slidePrevTransitionEnd（前のスライド遷移終了）`
`ionSlideReachStart（スライド到達開始）`	`reachBeginning（最初に到達）`
`ionSlideReachEnd（最後に到達）`	`reachEnd（最後に到達）`
`ionSlideTap（スライドタップ）`	`tap（タップ）`
`ionSlideTouchStart（スライドタッチ開始）`	`touchStart（タッチ開始）`
`ionSlideTouchEnd（スライドタッチ終了）`	`touchEnd（タッチ終了）`
`ionSlideTransitionStart（スライド遷移開始）`	`transitionStart（遷移開始）`
`ionSlideTransitionEnd（スライド遷移終了）`	`transitionEnd（遷移終了）`
`ionSlidesDidLoad（スライド読み込み完了）`	`init（初期化）`

（注意アイコンのSVGは省略）注

Swiper Vueで使用可能なすべてのイベントは、https://swiper.dokyumento.jp/vue#swiper-events にあります。

メソッド

ほとんどのメソッドは、<swiper> プロパティに直接アクセスするために削除されました。さらに、メソッドを呼び出すときに$elに最初にアクセスする必要がなくなりました。

これらのプロパティへのアクセスは、Vueコンポーネントではなく、Swiperインスタンス自体のプロパティにアクセスしたいので、注意が必要です。これを行うには、@swiperイベントハンドラーを介してSwiperインスタンスへの参照を取得することをお勧めします。

<template>
  <swiper @swiper="setSwiperInstance"> ... </swiper>
</template>

<script>
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    ...,
    setup() {
      const slides = ref();
      const setSwiperInstance = (swiper: any) => {
        slides.value = swiper;
      }
      return { setSwiperInstance };
    }
  });
</script>

ここから、Swiperインスタンスのプロパティにアクセスしたい場合は、slides.valueにアクセスします。たとえば、isBeginningプロパティを確認したい場合は、slides.value.isBeginningを実行できます。ただし、最初にslides.valueが定義されていることを確認してください！

以下は、ion-slidesからSwiper Vueに移行する際のメソッド変更の完全なリストです。

ion-slides メソッド	注記
`getActiveIndex()`	代わりに`activeIndex`プロパティを使用してください。
`getPreviousIndex()`	代わりに`previousIndex`プロパティを使用してください。
`getSwiper()`	`@swiper`を使用してSwiperインスタンスへの参照を取得します。上記の例を参照してください。
`isBeginning()`	代わりに`isBeginning`プロパティを使用してください。
`isEnd()`	代わりに`isEnd`プロパティを使用してください。
`length()`	代わりに`slides`プロパティを使用してください。（例：swiperRef.slides.length）
`lockSwipeToNext()`	代わりに`allowSlideNext`プロパティを使用してください。
`lockSwipeToPrev()`	代わりに`allowSlidePrev`プロパティを使用してください。
`lockSwipes()`	代わりに`allowSlideNext`、`allowSlidePrev`、および`allowTouchMove`プロパティを使用してください。
`startAutoplay()`	代わりに`autoplay`プロパティを使用してください。
`stopAutoplay()`	代わりに`autoplay`プロパティを使用してください。

エフェクト

CubeやFadeなどのエフェクトを使用している場合は、他のモジュールと同様にインストールできます。この例では、フェードエフェクトを使用します。最初に、swiperから`EffectFade`をインポートし、`modules`配列に提供します。

<template>
  <ion-page>
    <ion-content>
      <swiper :modules="modules">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { EffectFade } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';

  import 'swiper/css';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: { Swiper, SwiperSlide, IonContent, IonPage },
    setup() {
      return {
        modules: [EffectFade, IonicSlides],
      };
    },
  });
</script>

次に、エフェクトに関連付けられたスタイルシートをインポートする必要があります。

<template>
  <ion-page>
    <ion-content>
      <swiper :modules="modules">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { EffectFade } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';

  import 'swiper/css';
  import 'swiper/css/effect-fade';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: { Swiper, SwiperSlide, IonContent, IonPage },
    setup() {
      return {
        modules: [EffectFade, IonicSlides],
      };
    },
  });
</script>

その後、swiperの`effect`プロパティを`"fade"`に設定することで、アクティブ化できます。

<template>
  <ion-page>
    <ion-content>
      <swiper :modules="modules" effect="fade">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </ion-content>
  </ion-page>
</template>
<script>
  import { defineComponent } from 'vue';
  import { EffectFade } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { IonContent, IonPage, IonicSlides } from '@ionic/vue';

  import 'swiper/css';
  import 'swiper/css/effect-fade';
  import '@ionic/vue/css/ionic-swiper.css';

  export default defineComponent({
    components: { Swiper, SwiperSlide, IonContent, IonPage },
    setup() {
      return {
        modules: [EffectFade, IonicSlides],
      };
    },
  });
</script>

（注意アイコンのSVGは省略）注

Swiperのエフェクトの詳細については、https://swiper.dokyumento.jp/vue#effectsを参照してください。

まとめ

Swiperをインストールしたので、Swiperの新しい機能をすべて利用できます。Swiper Vue入門から始めて、Swiper APIドキュメントを参照することをお勧めします。

FAQ

この移行の例はどこにありますか？

`ion-slides`とそれと同等のSwiperの使用例を含むサンプルアプリは、https://github.com/ionic-team/slides-migration-samplesにあります。

この移行に関するヘルプはどこで入手できますか？

移行で問題が発生した場合は、Ionicフォーラムに投稿してください。

バグレポートはどこに提出しますか？

問題を開く前に、SwiperディスカッションボードまたはIonicフォーラムに投稿して、問題がコミュニティによって解決できるかどうかを確認してください。

Swiperライブラリで問題が発生している場合は、Swiperリポジトリに新しいバグを報告してください：https://github.com/nolimits4web/swiper/issues

`IonicSlides`モジュールで問題が発生している場合は、Ionic Frameworkリポジトリに新しいバグを報告してください：https://github.com/ionic-team/ionic-framework/issues

はじめに​

スタイリッシュなスワイプ​

セレクターの更新​

プリプロセッサ（オプション）​

コンポーネントの使用​

モジュールの使用​

IonicSlides モジュール​

プロパティ​

イベント​

メソッド​

エフェクト​

まとめ​

FAQ​

この移行の例はどこにありますか？​

この移行に関するヘルプはどこで入手できますか？​

バグレポートはどこに提出しますか？​

目次

はじめに

スタイリッシュなスワイプ

セレクターの更新

プリプロセッサ（オプション）

コンポーネントの使用

モジュールの使用

IonicSlides モジュール

プロパティ

イベント

メソッド

エフェクト

まとめ

FAQ

この移行の例はどこにありますか？

この移行に関するヘルプはどこで入手できますか？

バグレポートはどこに提出しますか？