Swiper 版本区分了组件和普通版本
(1)npm install vue-awesome-swiper –save
(2)在 main,js 里引入(全局):
import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css'
(3)组件里引入 :
import ‘swiper/dist/css/swiper.css’ //在全局没引入,这里记得要! import { swiper, swiperSlide } from ‘vue-awesome-swiper’
export default { components: { swiper, swiperSlide } }
配置
(4)template
<swiper :options="swiperOption"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper>
(5)数据
data(){ return{ swiperOption: { pagination:{ el:'.swiper-pagination' }, autoplay:{ delay:1000, disableOnInteraction:false } swiper参数 } } }
.