SwiperJS 未显示 next/prev 图标但区域可点击

Question

我有正在使用 swiperJS 的页面，你可以在这里看一个例子：
https://pleinairarchive.com/painting-date/july-4-2021-annie-coleman-melissa-english-gizelle-jean-english/

Artist Images 行的滑动条显示页面外的图像，但未显示 prev/next 箭头。在检查中，我发现该区域已定义并且正在正确构建。问题是按钮上的 :after 宽度为 0。我的猜测是字体在做一些奇怪的事情，但我不知道是什么。它没有在我的开发环境中本地显示，所以它肯定在这里。我正在使用 11ty 来构建这些页面，如果来自 unpkg.com.

的刷卡器，则拉入版本 6.6.1

我的 Swiper 标记 carousel.njk

<div class="{{ swipeClass }}-swiper swiper-container">
  <div class="swiper-wrapper">
    {% for image in images %}
      <div class="swiper-slide">
        <img data-full-src="{{image.imageKitUrl}}" src="{{image.imageKitThumbUrl}}" alt="" onClick="openLightbox(this)">
        {% if image.imageCredit %}
          <div>{{ image.imageCredit[0].name }}</div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
  <div class="swiper-button-prev {{ swipeClass }}-prev"></div>
  <div class="swiper-button-next {{ swipeClass }}-next"></div>
</div>

我的 Swiper 脚本 carousel.js

const swiperOptions = {
  slidesPerView: 1,
  spaceBetween: 10,
  breakpoints: {
    480: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 30,
    },
  },
  centerInsufficientSlides: true,
};

if( null !== document.querySelector('.artist-swiper') ) {
  const artistSwiper = new Swiper('.artist-swiper', {
    ...swiperOptions,
    navigation: {
      nextEl: '.artist-next',
      prevEl: '.artist-prev',
    }
  });
}

if( null !== document.querySelector('.leslie-swiper') ) {
  const leslieSwiper = new Swiper('.leslie-swiper', {
    ...swiperOptions,
    navigation: {
      nextEl: '.leslie-next',
      prevEl: '.leslie-prev',
    }
  });
}

if( null !== document.querySelector('.location-swiper') ) {
  const locationSwiper = new Swiper('.location-swiper', {
    ...swiperOptions,
    navigation: {
      nextEl: '.location-next',
      prevEl: '.location-prev',
    }
  });
}

Answer 1

github 上的 swiper 讨论提供了答案。这是我重置样式表中的 text-rendering CSS 属性。它被设置为 optimizeSpeed 禁用连字和字距调整。

SwiperJS 未显示 next/prev 图标但区域可点击

SwiperJS not showing next/prev icons but area is clickable

eleventy

swiperjs