使用 Swiper.js 创建带有上一张/下一张按钮的轮播图

这篇文章将引导您使用 Swiper.js 库创建带有上一张/下一张按钮的轮播图。我们提供完整的代码示例和详细解释，帮助您快速入门。

1. 引入 Swiper 库

首先，我们需要先引入 Swiper 库。可以通过以下代码引入：

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2. 初始化 Swiper 轮播图

接下来，我们可以通过以下代码来初始化 Swiper 轮播图：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url('static/picture/01.png');"></div>
    <div class="swiper-slide" style="background-image:url('static/picture/02.png');"></div>
    <div class="swiper-slide" style="background-image:url('static/picture/03.png');"></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

3. 添加 JavaScript 代码

最后，我们需要写一些 JavaScript 代码来处理轮播图的逻辑：

var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

其中，loop 选项表示是否循环轮播，navigation 选项表示是否显示上一张下一张按钮。

4. 完整代码

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url('static/picture/01.png');"></div>
    <div class="swiper-slide" style="background-image:url('static/picture/02.png');"></div>
    <div class="swiper-slide" style="background-image:url('static/picture/03.png');"></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
</script>

现在，您已经成功创建了一个带有上一张/下一张按钮的 Swiper 轮播图！您可以根据需要调整代码中的图片路径、样式以及 Swiper 的配置选项。