vue中使用轮播图 Vue-Awesome-Swiper

既然vue是基于组件进行开发的，那么适合组件的轮播图就用vue-awesome-swiper 吧，

这个就是swiper，不过弄了一个适合vue的东西;

官方这样描述：

基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

如果需要回退到 Swiper3，请使用 v2.6.7 版本。

如何使用呢？

第一步肯定要下载啊：

npm install vue-awesome-swiper --save

下载完之后这样引用一下：

< script>

import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {

name: "Carousel",

}

</ script>

引用完之后就可以用了

< script>

import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";

import carousel1 from "../assets/img/carousel1.jpg";

import carousel2 from "../assets/img/carousel2.jpg";

import carousel3 from "../assets/img/carousel3.jpg";

import carousel4 from "../assets/img/carousel4.jpg";

import carousel5 from "../assets/img/carousel5.jpg";

import carousel6 from "../assets/img/carousel6.jpg";

export default {

name: "Carousel",

data() {

return {

slides:[carousel1,carousel2,carousel3,carousel4,carousel5,carousel6],

swiperOption: {

//可选选项，自动滑动

autoplay: true,

// 循环滚动

loop : true,

//轮播图分页

pagination: {

el: '.swiper-pagination',

clickable: true,

},

}

};

},

computed: {

swiper() {

return this.$refs.mySwiper.swiper;

}

},

mounted() {

// current swiper instance

// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了

console. log( "this is current swiper instance object", this.swiper);

// this.swiper.slideTo(4, 4000, false);

},

components: {

swiper,

swiperSlide

}

};

</ script>

主要参数都在data 里面的 swiperOption 中设置，和以前使用swiper一样，没什么差别，

主要区别是在下面的处理上；

上面的加上图片就已经可以简单使用了；

官方说明：https://www.npmjs.com/package/vue-awesome-swiper