Swiper中文论坛
标题:
observer:true,observeParents:true初始化,循环播放初始化会无效
[打印本页]
作者:
愤路的小鸟
时间:
2019-5-22 09:14
标题:
observer:true,observeParents:true初始化,循环播放初始化会无效
本帖最后由 愤路的小鸟 于 2019-5-22 09:25 编辑
<!DOCTYPE
html
>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0,user-scalable=no"
>
<title>
首页
</title>
<link
rel=
"stylesheet"
href=
"swiper/swiper.css"
>
<script
src=
"jquery-2.0.0.js"
></script>
<script
src=
"swiper/swiper.js"
></script>
</head>
<body
style=
"
background
:
#f6f6f6
;
"
>
<h1>
observer: true, observeParents: true 初始化不会将loop: true也一起初始化
</h1>
<div
class=
"swiper-container"
style=
"
height
:
210
px
;
"
>
<div
class=
"swiper-wrapper"
id=
"slide"
></div>
<div
class=
"swiper-pagination"
></div>
</div>
</body>
<script>
//模拟ajax
setTimeout
(
function
() {
var
aaa = [
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
"http://zxpic.imtt.qq.com/zxpic_imtt/2019/05/21/1130/originalimage/113437_2017788197_1_600_400.jpg"
,
]
;
$
(
"#slide"
).
html
(
function
() {
var
html =
''
;
aaa.
forEach
(
function
(val) {
html +=
"<div class=
\"
swiper-slide
\"
><img src=
\"
"
+val+
"
\"
></div>"
})
;
return
html
;
})
;
}
,
3000
)
;
new
Swiper
(
'.swiper-container'
,
{
loop
:
true
,
spaceBetween
:
30
,
pagination
: {
el
:
'.swiper-pagination'
}
,
observer
:
true
,
//修改swiper自己或子元素时,自动初始化swiper
observeParents
:
true
//修改swiper的父元素时,自动初始化swiper
})
;
</script>
</html>
H5.rar
2019-5-22 09:11 上传
点击文件名下载附件
64.28 KB, 下载次数: 2
标题
欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)
Powered by Discuz! X3.2