vue使用swiper插件
程序员文章站
2022-07-10 21:21:49
...
最近在用VUE写一个单页项目,涉及到的轮播组件比较多。就想到了在项目中引入swiper进行开发,使用方法记录如下:
1、项目中安装swiper:
npm install aaa@qq.com --save-dev
2、组件中引入(或者在main.js中全局引入都可以)
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
3、实例中使用
export default {
data () {
return {
swiper: null
}
},
mounted () {
this.swiper= new Swiper('.swiper-container', {
autoplay: 3000,
speed: 1000,
autoplayDisableOnInteraction: false,
loop: true,
centeredSlides: true,
slidesPerView: 2,
pagination: '.swiper-pagination',
paginationClickable: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next'
})
}
}
最终实现效果:
上一篇: 算法-向量路径最小差值的和(阿里巴巴3.25笔试第一题)
下一篇: Swiper插件的简单使用
推荐阅读
-
Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
-
vue 中使用 watch 出现了如下的报错的原因分析
-
VUE脚手架具体使用方法
-
AE怎么使用FORM插件制作粒子飘散文字入场出场效果?
-
windows下关于sublime text2,HTML/CSS/JS Prettify插件使用路径问题处理
-
Sublime Text 2 JS 格式化插件 JsFormat的配置使用
-
谷歌浏览器(chrome)的免费插件时空隧道安装与使用图文教程
-
solidworks已经安装的motion插件却不能使用该怎么办?
-
Vue-Router的使用方法
-
jquery表单验证使用插件formValidator