共计 1172 个字符,预计需要花费 3 分钟才能阅读完成。
vue-awesome-swiper
我喜爱的一款轮播插件,他有多个抉择!而且反对手持滑动
所以我用到了明天。
装置
自己阐明一点:为什么不必 4.1.1
答:vue-awesome-swiper v4.1.1 版 autoplay、effect 等有效问题至今未解决
cnpm i vue-awesome-swiper@3.1.3 -S
引入
全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
独自引入
import Vue from 'vue'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
// 或者
require('swiper/dist/css/swiper.css')
测试
<template>
<swiper class="swiper">
<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>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
</swiper>
</template>
A 组
我最喜爱的轮播这款,在我的 MXLOGO 保留至今!然而很快辞别了
因为我要更新 MXLOGO 8.
<swiper :options="swiperOption">
<swiper-slide>
<a href="XXXXXX" target="_blank">
<img src="./assets/1.jpg">
</a>
</swiper-slide>
<swiper-slide>
<a href="XXXXXX" target="_blank">
<img src="./assets/1.jpg">
</a>
</swiper-slide>
<swiper-slide>
<a href="XXXXXX" target="_blank">
<img src="./assets/1.jpg">
</a>
</swiper-slide>
</swiper>
正文完