Swiper实现轮播效果

_洋

已于 2024-03-05 15:48:48 修改

阅读量1.1k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：壹囝臜＋文章标签： css css3 前端

于 2024-02-29 17:59:43 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/136377626

swiper官网：https://3.swiper.com.cn/

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="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  </head>
  <style>
    .swiper {
     
     
      width: 620px;
      height: 720px;
    }

    /* 左右箭头 */
    .swiper-button-prev:after {
     
     
      display: none;
    }
    .swiper-button-prev {
     
     
      background: url("./image/left-1.png");
      background-size: contain;
      background-repeat: no-repeat;
      width: 110px;
      height: 120px;
      left: 5px;
    }
    .swiper-button-next:after {
     
     
      display: none;
    }
    .swiper-button-next {
     
     
      background: url("./image/right-1.png");
      background-size: contain;
      background-repeat: no-repeat;
      width: 110px;
      height: 120px;
      right: 0px;
      z-index: 999;
      position: absolute;
    }

    /* 图片显示 */
    .swiper-slide {
     
     
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-slide img {
     
     
      width: 300px;
    }
    .swiper-slide-active img {
     
     
      position: absolute;
      width: 395px;
      transition: width 0.5s;
    }
    .swiper-slide-next img {
     
     
      position: absolute;
      left: -230px;
    }
    .swiper-slide-prev img {
     
     
      position: absolute;
      right: -230px;
    }
    .swiper-slide-active {
     
     
      z-index: 999;
    }
    .swiper-slide-next {
     
     
      z-index: 888;
    }
    .swiper-slide-prev {
     
     
      z-index: 888;
    }
    .bullet-style {
     
     
      width: 0px;
      height: 0px;
      border: 6px solid black;
      background-color: black;
      background-clip: padding-box;
      transform: rotateZ(45deg);
      display: inline-block;
      margin: 0 8px;
      cursor: pointer;
    }
    .bullet-style:hover {
     
     
      border-color: gray;
      background