ng-case/src/modules/study/case-js-module/pages/slider/slider.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>轮播图Slider Swiper.js</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">slider</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- Swiper轮播图 手动创建 -->
  <!-- Slider main container -->
   <button (click)="slide1?.slideNext()">next</button>
   <div #slide1Comp class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
  
</ion-content>