vue初始化请求里添加该方法
mounted () {
var that = this;
that.$nextTick(function(){
var mySwiper = new Swiper(".swiper-container",{
direction:"horizontal",/*横向滑动*/
loop:true,形成环路（即：可以从最后一张图跳转到第一张图
pagination:".swiper-pagination",/*分页器*/
autoplay:3000/*每隔3秒自动播放*/
});
})
},css就不多说了,控制大小应该都会.
接下来说第二个正确且简单的方法
正确:
第一步: 安装 npm i vue-awesome-swiper --save( 这一个是否安装根据实际情况,如果安装上一个你用没效果也要安装这个 => npm i swiper )
第二步: 在main.js文件里引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在当前页面引入
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
第三步;
(分页器)
在data里定义轮播图
swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {(轮播图切换方式)
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
},关于swiper在vue里的分享就到这里了,各位用的感觉阔以的帮忙点个赞呗,毕竟写了这么多,嘿嘿.关于swiper常用的目前踩到的坑就在这里,后续有会持续更新哟
补充一下：swiper在vue中的用法
首先通过npm i vue-awesome-swiper --save 来在vue中下载插件
然后再main.js中引入
require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)接着在需要用到的组件里结构中插入代码
然后在data中定义轮播图
swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
},此时的coverflow是轮播图切换的方式 更改属性可切换轮播模式
感谢各位的阅读！关于“vue里swiper会遇到什么问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
文章名称：vue里swiper会遇到什么问题
本文地址：http://bjjierui.cn/article/jjhhoi.html
