时间戳

首页 > 解决方案 > 角 | SwiperJS 分页和导航按钮不起作用

html - 角 | SwiperJS 分页和导航按钮不起作用

问题描述

我正在尝试在我的 Angular 项目中使用 SwiperJS。

  <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>

问题是，刷卡按钮和刷卡分页都没有出现。如果我将带有按钮的 div 放在swiper 标签之外，它们确实会出现但仍然不起作用。我确实导入了 swiper/css/bundle，并且在 styles.scss 文件中分别导入了分页和导航

我试图在打字稿中创建一个 Swiper 的对象，并将该对象与 HTML 中的对象与它的 ID 连接，然后导入 Swiper Navigation 并强制 Swiper 像这样使用它们：

import Swiper, { Navigation } from 'swiper';

Swiper.use([Navigation]);

const swiper = new Swiper(...);

我尝试在打字稿中使用配置变量，而不是将其变成一个对象（您可以在上面的 html 片段中看到它正在使用），如下所示：

    config: SwiperOptions = {
    pagination: true,
    navigation: {
      nextEl: 'swiper-button-next',
      prevEl: 'swiper-button-prev'
    },
    slidesPerView: 1,
    spaceBetween: 70,
  };

有趣的部分是滑动仍然有效，我可以拖动图像并且它们按照预期垂直移动。只有按钮和分页无法正常工作

标签： htmlangulartypescriptswiperswiperjs

解决方案

推荐阅读