не работает навигация в swiper с использованием angular 7

Я пытаюсь использовать 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>

Я следую по этому URL: swiperjs


angular angular8 swiper angular7 swiperjs
person Pathik Vejani    schedule 28.11.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Думаю твой swiper не инициализируется на твоем ngOnInit

Итак, вы можете запустить 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,
        }
      }
    });
  }

РАБОЧАЯ ДЕМО

person ahmeticat    schedule 28.11.2019