Angular swiper 手册下一张幻灯片

如何解决Angular swiper 手册下一张幻灯片

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

   <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,Controller
  ]);
  
  @ViewChild("selectArtSlider") slide: SwiperCore;
  slidePrev() {
    this.slide.slidePrev(.3,false);
  }
  slideNext() {
    this.slide.slideNext(.3,false);

  }

还是不行。请帮忙