vue项目中使用swiper.js做一个轮播图

ゝ一世哀愁。 2022-11-18 13:40 162阅读 0赞

先看效果：

![20210413130649416.gif][]

安装swiper时，指定版本号5.4.5；否则分页器可能不显示：npm install swiper@5.4.5

在main.js文件中添加；import 'swiper/css/swiper.min.css'

<template>
      <div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../../assets/a.png" alt="" srcset="" /></div>
            <div class="swiper-slide"> <img src="../../assets/b.png" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="../../assets/c.png" alt="" srcset="" /></div>
            <div class="swiper-slide"><img src="../../assets/d.png" alt="" srcset="" /></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </template>
    <script> 
    import Swiper from "swiper";
    export default { 
      data() {
        return {};
      }, 
      mounted() {
        var swiper = new Swiper(".swiper-container", {
          direction: "horizontal",
          loop: true,
          slidesPerView: "auto",
          spaceBetween: 20,
          centeredSlides: true,
          observeParents:true,
          observer:true,
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable:true,
          },
        });
      },
      methods: {},
    };
    </script>
    <style lang="css" scoped>
    .swiper-container {
      margin-top: 0.2rem;
      width: 100%;
      /* height: 4rem; */
      overflow: visible !important;
      position: relative;
      --swiper-pagination-color: rgba(90, 184, 239, 1);
    } 
    .swiper-container .swiper-wrapper .swiper-slide {
      width: 2.5rem;
      border-radius: 0.12rem;
    } 
    .swiper-container .swiper-wrapper .swiper-slide img {
      width: 100%;
      height: 100%;
      border-radius: 0.12rem;
    } 
    .swiper-container .swiper-wrapper .swiper-slide-prev {
      margin-top: 0.12rem;
      height: 4rem !important;
      position: relative;
    }
    .swiper-container .swiper-wrapper .swiper-slide-prev:before {
       content:"";
       height:100%;
       width:100%;
       background:rgba(0, 0, 0, .3);
       position: absolute;
       top:0;
       right:0;
      border-radius: 0.12rem;
      z-index: 1000;
    } 
    .swiper-container .swiper-wrapper .swiper-slide-prev img {
      height: 100%;
      position: absolute;
      z-index: 0;
    } 
    .swiper-container .swiper-wrapper .swiper-slide-next {
      margin-top: 0.182rem;
      height: 4rem !important;
    }
    .swiper-container .swiper-wrapper .swiper-slide-next:before {
       content:"";
       height:100%;
       width:100%;
       background:rgba(0, 0, 0, .3);
       position: absolute;
       top:0;
       right:0;
      border-radius: 0.12rem;
      z-index: 1000;
    }
    
    .swiper-container .swiper-wrapper .swiper-slide-next img {
      height: 100%;
    } 
    .swiper-container .swiper-wrapper .swiper-slide-active {
      width: 2.5rem;
      height: 4.36rem !important; 
    } 
    .swiper-pagination {
      bottom: -0.3rem !important;
      height:20px;
    }
     
    </style>

[20210413130649416.gif]: /images/20221022/1bb24d10f19f4342b1ad0abbd2adf2a4.png