我正在尝试在我的角度项目中使用SwiperJS.

<代码><；swiper[配置]=配置（ActiveIndexChange）="；GetDisplayedCharacter（）"；#刷机>；<；ng-container类="；刷机包装"；>；<；ng-template*ngfor="；字母字符"；Swiperslide>；<；IMG类="；slider-IMG"；alt="；字符"；[SRC]="；character.image"；>；<；/ng-template>；<；/NG-容器>；<；DIV类="；滑动分页"；>；<；/DIV>；<；DIV类="；滑动-按钮-上一个"；>；<；/DIV>；<；DIV类="；滑动按钮-下一步"；>；<；/DIV>；<；/Swiper>；

问题是，无论是滑动按钮还是滑动分页都没有出现。如果我将带有按钮的DIV放在swiper标签之外，它们确实会出现，但仍然不起作用。我在styles.scss文件

我尝试在TypeScript中创建一个Swiper对象，并使用其ID将其连接到HTML中的对象，然后导入Swiper导航并强制Swiper像这样使用它们：

  <swiper [config]="config" (activeIndexChange)="getDisplayedCharacter()" #swiper>
    <ng-container class="swiper-wrapper">
      <ng-template *ngFor="let character of characters" swiperSlide><img class="slider-img" alt="character" [src]="character.image"></ng-template>
    </ng-container>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </swiper>

我尝试在TypeScript中使用配置变量，而不是将其转换为对象（您可以在上面的HTML片段中看到它的使用），如下所示：

<代码>配置：swiperOptions={分页：true，导航：{nextel：' swiper-button-next '，prevel：' swiper-button-Prev '},幻灯片浏览：1，间隔：70，};

有趣的是，滑动仍然有效，我可以拖动图像，它们就像预期的那样垂直移动。只是按钮和分页不起作用。

顺晟科技：