swiper插件的分页器修改

杰尼龟不会游泳

于 2024-10-22 21:05:04 发布

阅读量276

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50865103/article/details/143168382

<!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>
      .swiper {
        width: 100%;
      }
      .swiper-slide img {
        width: 100%;
        height: 500px;
      }
      /* 修改分页器位置 */
      .swiper-horizontal > .swiper-pagination-bullets,
      .swiper-pagination-bullets.swiper-pagination-horizontal,
      .swiper-pagination-custom,
      .swiper-pagination-fraction {
        bottom: initial;
      }
      /* 修改分页器样式 */
      .swiper-pagination-bullet-active {
        background-color: yellow;
      }
      /* 修改大小 */
      .swiper-pagination-bullet {
        width: 13px;
        height: 13px;
      }
    </style>
  </head>
  <body>
    <div id="swiper">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./img/1.jpeg" alt="" /></div>
          <div class="swiper-slide"><img src="./img/2.jpeg" alt="" /></div>
          <div class="swiper-slide"><img src="./img/3.jpeg" alt="" /></div>
          <div class="swiper-slide"><img src="./img/4.jpeg" alt="" /></div>
          <div class="swiper-slide"><img src="./img/5.jpeg" alt="" /></div>
          <div class="swiper-slide"><img src="./img/6.jpg" alt="" /></div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script>
      var mySwiper = new Swiper(".swiper", {
        direction: "horizontal", // 垂直切换选项
        loop: true, // 循环模式选项
        zoom: true,
        freeMode: true, //自动贴合
        speed: 2000, //切换速度
        autoplay: {
          //自动播放
          delay: 2000, //自动切换的时间间隔
          stopOnLastSlide: false, //切换到最后一个slide时停止自动切换
          disableOnInteraction: false, //用户操作后是否停止
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
  </body>
</html>