滑块内的Swiperjs导航箭头

Question

我在Angular中实现了一个swiperjs滑块。在其他情况下，您可以只将导航代码放在swiper的容器元素之外。然而，在Angular中，事情有点不同。我试着使用CSS，但是没有用。它只是移出了视线，开始从外面被裁剪。

​

​

HTML代码：

<swiper [class.d-none]="!(showRecommendations$ | async)"
    [slidesPerView]="2"
    [spaceBetween]="10"
    [navigation]="true"
    [breakpoints]="{
        '992': {
          slidesPerView: 3,
          spaceBetween: 10
        }
      }"
>
     <ng-template swiperSlide 
    *ngFor="let gift of (gifts$ | async); let i = index">...
    </ng-template>

</swiper>

TS代码：

import SwiperCore, { Navigation } from "swiper/core";

...

SwiperCore.use([Navigation])

Answer 1

<div style="position:relative;">
  <swiper [class.d-none]="!(showRecommendations$ | async)"
      [slidesPerView]="2"
      [spaceBetween]="10"
      navigation="navigation:  {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      [breakpoints]="{
          '992': {
            slidesPerView: 3,
            spaceBetween: 10
          }
        }"
  >
      <ng-template swiperSlide 
      *ngFor="let gift of (gifts$ | async); let i = index">...
      </ng-template>
  </swiper>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
<div>

确保像我在答案中所做的那样，为包装器元素设置一个相对位置