在vue中使用swipre

准备

安装swiper低版本的包，如swiper^3.4.2

在mian.js中引入

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

具体使用

引入Swipre对象

mounted() {
    new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      autoplay: 2000,
      centeredSlides: true,
      loop: true,
      pagination: '.swiper-pagination'
    })
  }


页面部分

<div class="swiper-container">
     <div class="swiper-wrapper">
       <div class="swiper-slide"><img src="../assets/imgs/loop1.png" /></div>
       <div class="swiper-slide"><img src="../assets/imgs/loop1.png" /></div>
       <div class="swiper-slide"><img src="../assets/imgs/loop1.png" /></div>
       <div class="swiper-slide"><img src="../assets/imgs/loop1.png" /></div>
     </div>
     <div class="swiper-pagination"></div>
   </div>

样式部分

.swiper-container {
  width: 100%;
  padding: 0.5rem 0;
}
.swiper-slide {
  /* 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;
  transition: 300ms;
  transform: scale(0.8);
  img {
    height: 3.27rem;
    width: 6.28rem;
  }
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}

页面宽度不足时出现覆盖

给active功能的class添加层级

在样式前加::v-deep覆盖或者添加属性

::v-deep 是vue中样式穿透，覆盖和添加原有样式

 

::v-deep .swiper-slide-active {
  z-index: 1000;
}