使用swiper制作轮播图
在Vue中使用swiper可使用vue-awesome-swiper组件
npm install swiper vue-awesome-swiper --save
全局注册
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
局部注册
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
}
}
组件
<template> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <swiper-slide>Slide 4</swiper-slide> <swiper-slide>Slide 5</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template>
我们可以在swiperOptions 中设置轮播图的各种属性
data(){
return {
swiperOption:{
autoplay:true,
loop:true,
effect:'cube',
cubeEffect: {
shadowOffset: 100,
shadowScale: 0.6
},
pagination: {
el: '.swiper-pagination',
clickable:true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
更多的细节可到swiper中文文档查阅