vue中使用swiper

标签: 前端  Swiper  Vue  swiper  vue  轮播图

最近在研究vue的周边技术,发现swiper,在官网中也有说明要如何进行操作,下面我进行进一步的总结
首先在终端进行

npm install vue-awesome-swiper --save

在main.js中引入一下代码

import Vue from 'vue'
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper /* { default global options } */)

在要操作的页面进行以下代码的书写

HTML

<swiper :options="swiperOption">
        <swiper-slide> <img
            src="./../assets/images/u=3038625765,121755996&fm=26&gp=0.jpg"
            alt=""
          ></swiper-slide>
        <swiper-slide><img
            src="./../assets/images/u=2775288068,1376966212&fm=26&gp=0.jpg"
            alt=""
          ></swiper-slide>
        <swiper-slide><img
            src="./../assets/images/下载 (1).jpg"
            alt=""
          ></swiper-slide>
        <swiper-slide><img
            src="./../assets/images/u=2668166537,1769684355&fm=26&gp=0.jpg"
            alt=""
          ></swiper-slide>

        <swiper-slide><img
            src="./../assets/images/u=1285800615,1039918258&fm=26&gp=0.jpg"
            alt=""
          ></swiper-slide>
        <!-- 分页器 -->
        <div
          class="swiper-pagination"
          slot="pagination"
        ></div>
      </swiper>

JS代码(代码书写在data中)

 data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        loop: true
      },

    }
  },

CSS代码

.wrapper {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 30.48%;
  background: #eee;
  .swiper-img {
    width: 100%;
  }
}
.wrapper /deep/ .swiper-pagination-bullet-active {
  background: #fff;
}
//改变小圆点的颜色,可自行更改
/deep/ .swiper-pagination-bullet-active {
  background: #f99;
}

在这里插入图片描述
酱紫便可以进行轮播图自动切换了~

原文链接:加载失败,请重新获取