使用插件vue-awesome-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'(css需要单独引用)
3、在组件中使用
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
html代码
<swiper :options="swiperOption">
<swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide>
</swiper>
js代码
export default {
name: '',
data () {
return {
swiperOption:{
slidesPerView: 'auto',
centeredSlides:true,
spaceBetween: 10,
loop:true,
speed:600, //config参数同swiper4,与官网一致
}
}
},
components: {
swiper,
swiperSlide
}
}
在vue中使用轮播图方式二:直接引入轮播图插件
swiper官方文档地址:swiper中文网
1、安装
npm i swiper@3.4.2 -S
2、直接在组件中加载插件
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
3、使用
template模板中
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
js中:这里需要注意代码应该写在mounted函数中
mounted(){
//初始化轮播图
var swiper = new Swiper('.swiper-container', {
autoplay:5000,
loop: true,
});
}
可以选择给swiper定义一个大小
.swiper-container {
width: 600px;
height: 300px;
}