Угловая навигация Swiper не работает должным образом - PullRequest
0 голосов
/ 07 мая 2019

Html:

 <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <div class="col-12 col-sm-12 d-flex text-center ">
            <div class="col-4 col-sm-4" [routerLink]="['/user']">
              <button mat-mini-fab>
                <span>4</span>
              </button>
            </div>
            <div class="col-4 col-sm-4 px-0" [routerLink]="['/job']">
              <button mat-mini-fab>5</button>
            </div>
            <div class="col-4 col-sm-4 px-0" [routerLink]="['/contacts']">
              <button mat-mini-fab>6</button>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev "></div>
      <div class="swiper-button-next"></div>
      <mat-divider class="mt-1"></mat-divider>
    </div>

ц

 ngAfterViewInit() {
    this.elementRef = new Swiper(this.elementRef.nativeElement.querySelector('.swiper-container'), {
    });
  }
  ngOnInit() {
    var mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,

      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  }

` введите описание изображения здесь Я использовал Angular swiper npm для углового проекта. событие клика применяется к каждому содержимому swiper / carousel. При прокрутке вперед / назад событие щелчка не работает для содержимого.

...