1

我创建了 Ionic-Angular PWA。我已将 ionic 版本更新为 5.7.0。根据这个新的更新，我正在尝试用 swiper-slide 替换 ion-slides，因为 ion-slides 已被弃用。

swiper：6.8.4
离子：5.7.0
角度：12.0.2

在我的代码中

app.module.ts

import { SwiperModule } from 'swiper/angular';
@NgModule({
   imports: [SwiperModule],
 })

组件.ts

import SwiperCore, { Navigation, Pagination } from 'swiper';
import { IonicSwiper } from '@ionic/angular';

SwiperCore.use([IonicSwiper, Navigation, Pagination]);
export class GenesisPage implements OnInit {
  slideOpts = {
    initialSlide: 0,
    speed: 400,
    loop: true,
    autoplay: {
    disableOnInteraction: false
   },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet(index, className) {
      const newClass = `${className} myCustomPager`;
      return `<span class="${newClass}"></span>`;
    }
}

};

组件.html

<swiper [pagination]="slideOpts.pagination" [initialSlide]="slideOpts.initialSlide"
                [speed]="slideOpts.speed" [loop]="slideOpts.loop" [autoplay]="slideOpts.autoplay">
                <swiper-slide>
                    <div class="image-wrapper">
                        <img loading="lazy" *ngIf="!webp" width="640" height="360"
                            src="assets/images/genesis/launch-slide-1-new.png" class="first" alt="launch slide"
                            useImg />
                        <img loading="lazy" *ngIf="webp" width="640" height="360"
                            src="assets/images/genesis/launch-slide-1-new.webp" class="first" alt="launch slide"
                            useImg />
                    </div>
                    <div class="slide-content-wrap">
                        <h2>DISCOVER</h2>
                        <p>& EXPLORE</p>
                    </div>
                </swiper-slide>
            </swiper>

我收到如下错误 在此处输入图像描述

谁能帮我解决这个问题。提前致谢。

4

2 回答 2

0

我面临着同样的问题。尝试在 Ionic 页面的模块文件中导入“SwiperModule”而不是主“app.module.ts”

// page-name.module.ts

import { SwiperModule } from 'swiper/angular';
@NgModule({
   imports: [SwiperModule],
 })
于 2021-10-20T12:26:05.227 回答
0

我发现 swiper-slide 不起作用，所以我根据 Swiperjs.com 使用以下内容

<swiper
  [pagination]="{type: 'fraction'}"
  [navigation]="true"
  class="mySwiper">
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>
于 2021-10-22T13:51:20.853 回答