再次使用vue-awesome-swiper做异形轮播

先上效果图

依旧是面对百度编程，在vue中使用swiper最重要的就是用对版本，npm i 了几个版本后有各种细节问题，最后找到最佳组合
[email protected]
[email protected]

npm install swiper@5.3.6 --save
npm i vue-awesome-swiper@3 -S   

页面按需引入

html代码

<swiper class="mySwiper" :options="swiperOption" ref="mySwiper">
        <!-- 添加的图片 -->
        <swiper-slide>
          <div class="active_font">永宁今日完成落地上图</div>
          <div>46亩</div>
        </swiper-slide>

        <swiper-slide>
          <div class="active_font">同心今日完成落地上图</div>
          <div>46亩</div>
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>

js代码

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
components: {
    swiper,
    swiperSlide,
  },

data() {
    return {
swiperOption: {
        loop: true,
        // observer: true, //修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, //修改swiper的父元素时，自动初始化swiper
        slidesPerView: 3,
        slideToClickedSlide: true, //设置为true则点击slide时会在这个slide产生过渡
        centeredSlides: true,
        autoplay: {
          delay: 1000,
          pauseOnMouseEnter:true
        },

        spaceBetween: 1,
        direction: "vertical",
        on: {
          //这里是点击事件，按需求来
        },
      },

}
}

做完后，其中最麻烦的其实css，得一点一点调
css代码

.swiper-container {
  height: 100px;
}
.swiper-wrapper .swiper-slide {
  height: 36px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #bdb9b9;

}
/deep/.swiper-wrapper {
  height: 36px;
  width: 85%;
  margin: 0 auto;
}
.swiper-slide {
  width: 85%;
  margin: 0 auto;
}
.swiper-wrapper,
.swiper-slide-active {
  width: 100% !important;
  color: #fff!important;
  font-size: 16px;
  padding-left: 20px;
  background: url("~@/assets/img/left_icon.png") no-repeat;
  background-position: -2px 8px;
  right: 10px;
}
.swiper-wrapper,
.swiper-slide-active .active_font{
  margin-left: 10px;
}