如何自定义Swiper 幻灯片的左右切换按钮样式？

要自定义 Swiper 幻灯片的左右按钮样式，您可以使用 Swiper 提供的 navigation 参数来实现。您可以在初始化 Swiper 时指定 navigation.nextEl 和 navigation.prevEl 选项，以指定左右按钮的 HTML 元素或选择器。然后，您可以使用 CSS 来自定义这些按钮的样式。

以下是一个简单的示例，演示如何使用自定义样式定义 Swiper 幻灯片的左右按钮：

首先，在 HTML 中定义包含幻灯片的容器和左右按钮的元素：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 幻灯片内容 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- 左右按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

然后，在 CSS 文件中添加样式来自定义左右按钮：

/* 左右按钮样式 */
.swiper-button-prev,
.swiper-button-next {
  width: 30px;
  height: 30px;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

/* 可选：悬停样式 */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #333;
}

最后，在 JavaScript 中初始化 Swiper，并指定左右按钮的选择器：

var mySwiper = new Swiper('.swiper-container', {
  // 其他选项...
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

通过以上步骤，您就可以自定义 Swiper 幻灯片的左右按钮样式了。