返回

零基础也能学会！玩转swiper，实现自动轮播

前端

入门第一步：创建HTML页面

首先，创建一个新的HTML页面，并命名为“index.html”。在这个页面中，我们将添加必要的代码来实现轮播效果。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="swiper.css">
  <script src="jquery.js"></script>
  <script src="swiper.js"></script>
</head>
<body>
  <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-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    });
  </script>
</body>
</html>

第二步：引入插件

接下来，我们需要引入swiper插件。swiper是一个流行的轮播图库，可以帮助我们轻松创建具有各种效果的轮播图。

在HTML页面的<head>部分，添加以下代码：

<link rel="stylesheet" href="swiper.css">
<script src="jquery.js"></script>
<script src="swiper.js"></script>

第三步：创建轮播图容器

在HTML页面的<body>部分，添加以下代码：

<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>

这段代码创建了一个轮播图容器，其中包含三个幻灯片。

第四步：添加分页器和导航按钮

为了让轮播图更加易于使用，我们可以添加分页器和导航按钮。

在轮播图容器中，添加以下代码：

<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

分页器将显示当前幻灯片的位置，导航按钮则允许用户手动切换幻灯片。

第五步：初始化swiper

最后，我们需要初始化swiper。在HTML页面的<script>部分，添加以下代码：

<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
  });
</script>

这段代码将初始化swiper，并启用自动轮播功能。

现在，您可以保存HTML页面并将其打开，您将看到一个带有自动轮播效果的轮播图。