时间戳

首页 > 解决方案 > 导航在使用 Angular 7 的 swiper 中不起作用

angular - 导航在使用 Angular 7 的 swiper 中不起作用

问题描述

我正在尝试使用swiper slider，但它没有导航幻灯片内容。

这是：stackblitz -最后一个水平选项卡中的滑动器。

ts：

ngOnInit() {
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 50,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      breakpoints: {
        1024: {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        }
      }
    });
  }

HTML：

<div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
  </div>

我正在关注这个网址：swiperjs

标签： angularangular7angular8swiperswiperjs

解决方案

我认为你的刷卡器没有初始化你的ngOnInit

所以，你可以在 tabChange 上初始化 swiper

更新您的标签组selectedTabChange

<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="onTabChange($event)">

和你的 ts 文件

像那样

  onTabChange(event:any) {
    if (event.index === 2) {
      this.initSwiper();
    } 
  }

  initSwiper(){
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 50,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      breakpoints: {
        1024: {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        }
      }
    });
  }

工作演示

推荐阅读