Vue项目中使用轮播图插件vue-awesome-swiper

使用插件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;
}  

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！