Swiper 幻灯片未在 ionic 5.7 中显示

Posted 2023-05-08

【中文标题】Swiper 幻灯片未在 ionic 5.7 中显示

【英文标题】：Swiper slide is not displaying in ionic 5.7

【发布时间】：2021-11-05 06:05:55

【问题描述】：

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

刷卡器：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>`;
    

;

component.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"  
                            src="assets/images/genesis/launch-slide-1-new.png" class="first" 
                            useImg />
                        <img loading="lazy" *ngIf="webp"  
                            src="assets/images/genesis/launch-slide-1-new.webp" class="first" 
                            useImg />
                    </div>
                    <div class="slide-content-wrap">
                        <h2>DISCOVER</h2>
                        <p>& EXPLORE</p>
                    </div>
                </swiper-slide>
            </swiper>

我收到如下错误

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

【问题讨论】：

这里与 angular 11 相同。向模块添加架构时：[CUSTOM_ELEMENTS_SCHEMA]，错误消失了，但我得到了一个空白页

找到答案的运气好吗？

我在 Angular 12 中也遇到了同样的问题

【参考方案1】：

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

// page-name.module.ts

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

【参考方案2】：

我发现 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>

【讨论】：

是的，这是有效的，这不是离子方式。它是棱角分明的风格。 是标签