说起swiper，简直是一款轮播图神器，本人是非常喜欢的，最近在向资深的小哥哥学习模拟数据传输，然后swiper就出现样式错乱和不能点击切换等各种问题，谁能告诉我发生了什么吗？我是谁？我在哪？
好吧，经过网上一番找资料，还是没找到，最后一位神人告诉我说，你取到数据后在初始化swiper看看！！！！！！！
神奇的事情发生了，一切恢复正常。
解决办法：
取到数据后再new Swiper
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
用手操作让它滚动后，它就不自动滚动了，不知道为什么，求解答，谢谢！这是html：
&div class="swiper-container swiper-container-horizontal"&
&div class="swiper-wrapper"&
&div class="swiper-slide"&&img src="/images/map4.jpg"&&/div&
&div class="swiper-slide"&&img src="/images/map2.jpg"&&/div&
&div class="swiper-slide"&&img src="/images/map3.jpg"&&/div&
&div class="swiper-slide"&&img src="/images/map1.jpg"&&/div&
&div class="swiper-pagination"&&/div&
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 3000
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
加上一行代码
autoplayDisableOnInteraction: false
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
为什么第一次是好的,之后的第一个视频都是不播放的,求救
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
swiper的所有基础演示都在这，我都是复制官方代码改的
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。swiper实现图片轮播功能
是一个相当强大的图片展示插件，下面我来介绍一下的简单功能。一般情况下我们所说的图片轮播就是在一个区域内有几张图片循环展示，有的可以滑动图片观看下一张图，有的可以点击图下方的小点来选择哪个图，也有点击两侧的左右按钮来切换图片展示。我们先来看一下如何实现
&div class="swiper-container"&
&div class="swiper-wrapper"&
&div class="swiper-slide"&Slide 1&/div&
&div class="swiper-slide"&Slide 2&/div&
&div class="swiper-slide"&Slide 3&/div&
&div class="swiper-slide"&Slide 4&/div&
&div class="swiper-slide"&Slide 5&/div&
&div class="swiper-slide"&Slide 6&/div&
&div class="swiper-slide"&Slide 7&/div&
&div class="swiper-slide"&Slide 8&/div&
&div class="swiper-slide"&Slide 9&/div&
&div class="swiper-slide"&Slide 10&/div&
&!-- 在图片下方增加小点 --&
&div class="swiper-pagination"&&/div&
&!-- 增加左右按钮 --&
&div class="swiper-button-prev"&&/div&
&div class="swiper-button-next"&&/div&
12345678910111213141516171819
&div class="swiper-container"&&&&&&&&&&div class="swiper-wrapper"&&&&&&&&&&&&&&div class="swiper-slide"&Slide 1&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 2&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 3&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 4&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 5&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 6&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 7&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 8&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 9&/div&&&&&&&&&&&&&&div class="swiper-slide"&Slide 10&/div&&&&&&&&&&/div&&&&&&&&&&!-- 在图片下方增加小点 --&&&&&&&&&&div class="swiper-pagination"&&/div&&&&&&&&&&!-- 增加左右按钮 --&&&&&&&&&&div class="swiper-button-prev"&&/div&&&&&&&&&&div class="swiper-button-next"&&/div&&&&&&/div&
上方这几个div暂且先替代图片，和图片的展示效果相同，下面再来看一下js该如何写
&script src="http://code.jquery.com/jquery-2.1.3.min.js"&&/script&
&!-- 引入js的核心插件包 --&
&script src="../dist/js/swiper.jquery.min.js"&&/script&
&!--初始化Swiper --&
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
123456789101112
&script src="http://code.jquery.com/jquery-2.1.3.min.js"&&/script&&&&&&!-- 引入js的核心插件包 --&&&&&&script src="../dist/js/swiper.jquery.min.js"&&/script&&&&&&&!--初始化Swiper --&&&&&&script&&&&&var swiper = new Swiper('.swiper-container', {&&&&&&&&pagination: '.swiper-pagination',&&&&&&&&paginationClickable: true,&&&&&&&&nextButton: '.swiper-button-next',&&&&&&&&prevButton: '.swiper-button-prev'&&&&});
这样他的基本功能就实现了，当然还需要一些样式来让他们的排列便于观看
&!--引入css文件--&
&link rel="stylesheet" href="css/swiper.min.css"&
&!-- 页内css样式 --&
html, body {
height: 100%;
background: #
font-family: Helvetica Neue, Helvetica, Arial, sans-
font-size: 14
color:#000;
margin: 0;
padding: 0;
.swiper-container {
width: 100%;
height: 100%;
.swiper-slide {
text-align:
font-size: 18
background: #
/* Center slide text vertically */
display: -webkit-
display: -ms-
display: -webkit-
-webkit-box-pack:
-ms-flex-pack:
-webkit-justify-content:
justify-content:
-webkit-box-align:
-ms-flex-align:
-webkit-align-items:
align-items:
1234567891011121314151617181920212223242526272829303132333435363738394041
&!--引入css文件--& &link rel="stylesheet" href="css/swiper.min.css"&&&&&&&!-- 页内css样式 --&&&&&&style&&&&&html, body {&&&&&&&&position: relative;&&&&&&&&height: 100%;&&&&}&&&&body {&&&&&&&&background: #eee;&&&&&&&&font-family: Helvetica Neue, Helvetica, Arial, sans-serif;&&&&&&&&font-size: 14px;&&&&&&&&color:#000;&&&&&&&&margin: 0;&&&&&&&&padding: 0;&&&&}&&&&.swiper-container {&&&&&&&&width: 100%;&&&&&&&&height: 100%;&&&&}&&&&.swiper-slide {&&&&&&&&text-align: center;&&&&&&&&font-size: 18px;&&&&&&&&background: #fff;&&&&&&&&&/* Center slide text vertically */&&&&&&&&display: -webkit-box;&&&&&&&&display: -ms-flexbox;&&&&&&&&display: -webkit-flex;&&&&&&&&display: flex;&&&&&&&&-webkit-box-pack: center;&&&&&&&&-ms-flex-pack: center;&&&&&&&&-webkit-justify-content: center;&&&&&&&&justify-content: center;&&&&&&&&-webkit-box-align: center;&&&&&&&&-ms-flex-align: center;&&&&&&&&-webkit-align-items: center;&&&&&&&&align-items: center;&&&&}&&&&&/style&
如果您想让图片下方的变成数字，只需要在css样式中增加下面的代码
.swiper-pagination-bullet {
height: 20
text-align:
line-height: 20
font-size: 12
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
.swiper-pagination-bullet-active {
background: #007
1234567891011121314
.swiper-pagination-bullet {&&&&&&&&width: 20px;&&&&&&&&height: 20px;&&&&&&&&text-align: center;&&&&&&&&line-height: 20px;&&&&&&&&font-size: 12px;&&&&&&&&color:#000;&&&&&&&&opacity: 1;&&&&&&&&background: rgba(0,0,0,0.2);&&&&}&&&&.swiper-pagination-bullet-active {&&&&&&&&color:#&&&&&&&&background: #007&&&&}
然后在初始化Swiper时写成这样
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (index, className) {
return '&span class="' + className + '"&' + (index + 1) + '&/span&';
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
1234567891011
&script&&&&&var swiper = new Swiper('.swiper-container', {&&&&&&&&pagination: '.swiper-pagination',&&&&&&&&paginationClickable: true,
paginationBulletRender: function (index, className) {&&&&&&&&&&&&return '&span class="' + className + '"&' + (index + 1) + '&/span&';&&&&&&&&},&&&&&&&&nextButton: '.swiper-button-next',&&&&&&&&prevButton: '.swiper-button-prev'&&&&});&&&&&/script&
0 个人已赞
使用社交账户登录在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
微信小程序的轮播图swiper，调用后，图片显示不完全怎么办?怎样覆盖系统的 样式呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
overflow:或者 overflow:visible !
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
解决了！！！微信的swiper系统自带的样式，如果想覆盖，只能用包含选择器，比如：系统自带:swiper{width:320rpx}自己写：page swiper{width:480}
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我是把image标签换成了view，然后图片设置的背景图片，这样能解决
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。