Swiper的使用说明》

最新推荐文章于 2025-09-10 02:28:55 发布

原创最新推荐文章于 2025-09-10 02:28:55 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

js 专栏收录该内容

32 篇文章

订阅专栏

swiper官网地址
在这里插入图片描述

swiper实例
在这里插入图片描述

项目文件夹
在这里插入图片描述
源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //需导入css
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
    
        .box {
          width: 600px;
          height: 300px;
          background-color: antiquewhite;
          margin: 100px auto;
        }
       
       //以下样式代码直接复制
        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;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
</head>
<body>
   <div class="box">

     <!-- Swiper -->
     <div class="swiper mySwiper">
      <div class="swiper-wrapper">
       //如果要添加图片，将slide修改成图片的地址即可
        <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>

   </div>

//需要导入js文件 
   <script src="./js/swiper-bundle.min.js"></script>

   <script>
    var swiper = new Swiper(".mySwiper", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      //可以使轮播图循环去执行
      loop: true,
    });
  </script>
</body>
</html>