在ionic应用中使用Swiper.js实现滑动组件（ion-slides组件已经废弃）

本文链接：https://blog.csdn.net/panghuangang/article/details/141285110

https://ionicframework.com/docs/angular/slides
在这里插入图片描述

安装swiper

执行命令npm install swiper进行安装：
在这里插入图片描述

修改app.module.ts文件

在这里插入图片描述

修改app.component.ts文件

在这里插入图片描述

在组件中使用

备注：下面演示用的图片、文字来自华为商城https://www.vmall.com/index.html

循环播放、分页

根组件的app.component.html文件的内容：

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>滚动组件</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <swiper-container [loop]="true" pagination>
      <swiper-slide>
        <ion-card>
          <ion-img src="https://res.vmallres.com/uomcdn/CN/cms/202406/1584fe23de8945839bc1ff51a876b20f.png"></ion-img>
          <ion-card-header>
            <ion-card-subtitle>卫星通话|超可靠玄武架构|全焦段超清影像</ion-card-subtitle>
            <ion-card-title>HUAWEI Mate 60 Pro</ion-card-title>
          </ion-card-header>
          <ion-card-content>¥5699起</ion-card-content>
        </ion-card>
      </swiper-slide>
      <swiper-slide>
        <ion-card>
          <ion-img src="https://res.vmallres.com/uomcdn/CN/cms/202408/696878ae8d3a42b08e5611ccb7cf6cb8.png"></ion-img>
          <ion-card-header>
            <ion-card-subtitle>115W 超能释放|锐薄先锋设计|超广色域OLED悬浮屏</ion-card-subtitle>
            <ion-card-title>HUAWEI MateBook GT 14 酷睿 Ultra</ion-card-title>
          </ion-card-header>
          <ion-card-content>¥7499起</ion-card-content>
        </ion-card>
      </swiper-slide>
      <swiper-slide>
        <ion-card>
          <ion-img src="https://res.vmallres.com/uomcdn/CN/cms/202407/5c32382be71742ea84c8cb283a222421.png"></ion-img>
          <ion-card-header>
            <ion-card-subtitle>144Hz高刷全面屏|华为笔记|</ion-card-subtitle>
            <ion-card-title>HUAWEI MatePad 11.5S</ion-card-title>
          </ion-card-header>
          <ion-card-content>¥2099起</ion-card-content>
        </ion-card>
      </swiper-slide>

    </swiper-container>

  </ion-content>
</ion-app>