ionic5 slides轮播图组件的使用

ionic5.x中的轮播图组件是基于swiper插件，所以配置slides的属性需要在swiper的api中找，Swiper Api：http://idangero.us/swiper/api/

ionic5 slides轮播图组件的基本用法

1、在你的模板文件中配置如下代码：

<ion-slides pager="true" [options]="slideOpts">
	<ion-slide>
	  <h1>Slide 1</h1>
	</ion-slide>
	<ion-slide>
	  <h1>Slide 2</h1>
	</ion-slide>
	<ion-slide>
	  <h1>Slide 3</h1>
	</ion-slide>
</ion-slides>

2、在你的业务逻辑文件中配置slides的属性：

export class SlidesPage implements OnInit {
  slideOpts = {
    effect: 'flip',
    speed: 400,
    loop:true,
    autoplay: {
      delay: 2000
    }
  };
} 

这样就可以实现一个轮播图，但是大家会发现轮播图刚开始会自动轮播，当用户手动滑动一会后，轮播图就不会自动轮播图了。

解决方案查看下面帖子。

http://www.ionic.wang/article-index-id-152.html

这就是ionic5 slides轮播图组件的使用的使用方法,ionic5 slides轮播图组件的使用就给大家先介绍到这里，希望对你有帮助

更多ionic5 slides轮播图组件的使用的使用教程：https://www.itying.com/goods-1067.html