滑块内的 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>

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