如何用swiper插件快速做轮播图/网页中滑动切换图片效果实现

第七种黄昏

已于 2025-05-05 15:38:23 修改

阅读量673

点赞数 19

文章标签：前端 html5 css3 vscode

于 2025-05-05 14:00:41 首次发布

本文链接：https://blog.csdn.net/2401_83607690/article/details/147711746

版权

轮播图效果是网页中常见的一种效果，单纯用css代码实现非常复杂，但我们可以利用swiper插件实现，本文将讲述如何利用swiper插件快速实现各种轮播图效果，附有详细过程

完整实现步骤（Visual Studio Code操作演示）

第一步：下载插件文件

访问官网：下载Swiper - Swiper中文网

选择最新版zip文件下载，解压

下载完后回到官网Swiper演示 - Swiper中文网

选择你想要的效果，本文以020为例编写代码实现其效果

第二步：引入插件和css js文件

点击红字“在新窗口打开”，右击选择查看源代码，我们找到CSS和JS代码部分

注意他引入的js和css文件名称，回到你下载解压后的文件夹里，将你的同名文件拖入你的项目目录下，我将其拖入了swiper文件夹下

将这两个文件引入到你的html代码中，路径格式是你的CSS JS文件所在的路径，如下所示

  <script src="./swiper/swiper-bundle.min.js"></script>

 <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">

三 : 复制粘贴网页代码

回到网页源码将

css代码部分引入
swiper部分引入
initialize部分引入

本文示例中引入后的最终html文件如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <style>
    /* 设置容器大小（根据需求修改）这个是你自己定义的盒子大小 */
   .box {
        width: 1200px;
        height: 500px;
        margin: 50px auto;
        }

    /*这些是网页中的源码css部分开始*/
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /*网页中的源码css部分结束*/

    </style>
</head>
<body>
    <div class="box">

/*网页中源码html部分开始*/
        <div class="swiper mySwiper">
            <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 class="swiper-slide">Slide 4</div>
              <div class="swiper-slide">Slide 5</div>
              <div class="swiper-slide">Slide 6</div>
              <div class="swiper-slide">Slide 7</div>
              <div class="swiper-slide">Slide 8</div>
              <div class="swiper-slide">Slide 9</div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
/*网页中源码html部分结束*/

    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>

/*网页中源码script开始*/
      <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>
/*网页中源码script结束*/

</body>
</html>

我们可以发现除去自己要设置盒子的宽高以及需要改变CSS JS引入文件的路径外，代码和网页中源码基本一致

最终效果如下，点击左右两个箭头即可切换图片