既然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

Logo

前往低代码交流专区

更多推荐