Angular swiper 手册下一张幻灯片答案

【问题标题】：Angular swiper manual next slideAngular swiper 手册下一张幻灯片
【发布时间】：2021-04-27 08:36:20
【问题描述】：

我创建了一个滑动幻灯片。幻灯片效果很好，但我想用自定义按钮导航幻灯片。我只是尝试一些东西。喜欢：


   <swiper #selectArtSlider [slidesPerView]="'auto'" [spaceBetween]="15" [observeParents]="'true'" 
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }" 
>
          <ng-template swiperSlide   >
            <div class="select-art-wrapper active" (click)="selectArt($event)">

            <div class="jar">
              <img src="/assets/img/art-jar-1.png" alt="Nutella" />
            </div>
            <div class="board">
              <img src="/assets/img/art-board-4.jpg" alt="Nutella" />
            </div>
            <div class="select">
              <label for="art-1">Etiketi Seç</label>
              <div class="custom-checkbox">
                <input type="checkbox" id="art-1">
                <label for="art-1"><i class="fas fa-check"></i></label>
              </div>
              
            </div>
          </div>

          </ng-template>
       
        </swiper>
        <div class="swiper-actions d-flex justify-content-end">
          
    <button type="button" class="swiper-navigation-prev btn btn-actions btn-border btn-border-hoverless mr-1" (click)="slidePrev()">&lt;</button>
    <button type="button" class="swiper-navigation-next btn btn-actions  " (click)="slideNext()">&gt;</button>
        </div>

我在https://stackblitz.com/edit/swiper-angular-example-12hed8?file=src%2Fapp%2Fapp.component.html看到了那个代码

当它不工作时，我尝试这样的事情

import SwiperCore, {
    Navigation,
    Pagination,
    Scrollbar,
    A11y,
    Virtual,
    Zoom,
    Autoplay,
    Thumbs,
    Controller
  } from "swiper/core";
  
  // install Swiper components
  SwiperCore.use([
    Navigation,
    Pagination,
    Scrollbar,
    A11y,
    Virtual,
    Zoom,
    Autoplay,
    Thumbs,
    Controller
  ]);
  
  @ViewChild("selectArtSlider") slide: SwiperCore;
  slidePrev() {
    this.slide.slidePrev(.3, false);
  }
  slideNext() {
    this.slide.slideNext(.3, false);

  }

它仍然不起作用。请帮忙

【问题讨论】：

标签： angular navigation swiper

【解决方案1】：

您应该从自定义按钮中删除点击事件绑定。我遇到了同样的问题，但是由于您使用正确的按钮类名称将导航绑定设置为 prevEl 和 nextEl，它应该可以工作而无需添加另一个 click 方法，它只会使用内置方法。

【讨论】：