导航在使用 Angular 7 的 swiper 中不起作用答案

【问题标题】：navigation not working in swiper using angular 7导航在使用 Angular 7 的 swiper 中不起作用
【发布时间】：2019-11-28 09:05:43
【问题描述】：

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

这里是：stackblitz - swiper 在最后一个水平标签中。

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

【问题讨论】：

标签： angular angular7 angular8 swiper swiperjs

【解决方案1】：

我认为你的 swiper 没有在你的 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,
        }
      }
    });
  }

WORKING DEMO

【讨论】：