0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Ionicの<ion-slides>コンポーネントで手動スワイプを無効にする

Posted at

結論

test.page.html
<ion-slides #slides class="swiper-no-swiping">

のように、swiper-no-swipingクラスを付与してあげるだけで、手動スワイプによる遷移を止めることが出来ます。

どういうときに使うのか

**あまり使わない方が良いです。**なぜならUIのアニメーションは横移動なのにそれに伴ったアクションで操作ができないから…

例えばIonicのコンポーネントにセグメントというものがあります。セグメントも横移動アニメーションですが、セグメントの動きに合わせて表示をアニメーションで変えたい時、Slidesコンポーネントはとても相性が良いです。但し、その中身で何かしらの横動作が必要な時、Slidesコンポーネントの遷移は発生させたくない(セグメントコンポーネントの操作のみで移動したい)という場合があります。そういうときに使いましょう。

もう一度いうと、あまり使わない方が良いです。

何でこれで出来るのか

IonicのSlidesコンポーネントでは、内部でSwiperJSというライブラリを使用しており、そのAPIとしてこのクラスが用意されているためです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?