vue中使用swiper

首先,下载安装swiper

npm i swiper@5.4.5

为什么用5.4.5呢,我也不知道,听同事说有几个版本有bug,这个他们用的还可以,所以我也用了 > . <

main.js中引入

// swiper
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";
Vue.use(VueAwesomeSwiper /* { default options with global component } */);

需要写轮播的页面

<!-- 轮播图 -->
    <div class="Rotation">
      <div class="header-swiper">
        <swiper ref="mySwiper" :options="swiperOption">
          <swiper-slide>
            <img src="../../assets/lb1.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/lb1.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../assets/lb1.png" />
          </swiper-slide>
          <!-- 分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- 前进后退按钮 -->
          <div class="swiper-button-next" slot="pagination"><img src="../../assets/you.png"></div>
          <div class="swiper-button-prev" slot="pagination"><img src="../../assets/zhuo.png"></div>
        </swiper>
      </div>
    </div>
    <!-- 轮播图 -->
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 10,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
/* 轮播图 */
.swiper-container {
  width: 100%;
  height: 350px;
}
.swiper-slide {
  /* width: 50% !important; */
  text-align: center;
  font-size: 18px;
  /* 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(1);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1.5);
  z-index: 9;
}

.swiper-slide img {
  width: 100%;
}

.swiper-button-prev{
  left: 30px;
  right: auto;
}

.swiper-button-prev:after{
  content:'none'
}

.swiper-button-next{
  right: 30px;
  left: auto;
}

.swiper-button-next:after{
  content:'none'
}
/* 轮播图 */

效果图

在这里插入图片描述

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值