Swiper

スワイプ可能なビュー。バナーなどのカルーセルに用います。

コード例

Slide 1

Slide 2

Slide 3

Slide 4

画像カルーセル

自動再生・インジケーター・循環表示に対応

<m-swiper indicator-dots autoplay interval="3000" circular
  style="height:180px">
  <m-swiper-item>
    <div style="background:#6366F1;">Slide 1</div>
  </m-swiper-item>
  <m-swiper-item>
    <div style="background:#10B981;">Slide 2</div>
  </m-swiper-item>
</m-swiper>

API

Swiper

Swiper のプロパティ

属性	说明	类型	默认值
indicator-dots	ページインジケーター（ドット）を表示する	boolean	false
autoplay	自動切り替え	boolean	false
interval	自動切り替えの間隔（ms）	number	5000
duration	スワイプアニメーションの長さ（ms）	number	500
current	表示中のページのインデックス	number	0
circular	ループ切り替え	boolean	false
vertical	縦方向のスワイプ	boolean	false

Swiper のイベント

属性	说明	类型	默认值
change	表示ページが変わったとき	{ current }	-
animationfinish	切り替えアニメーション終了時	{ current }	-