Swiper中文论坛
标题:
Swiper使用效果loop=true 时，第1个页面在手机没效果，求解决！
[打印本页]
作者:
Jiang
时间:
2015-6-5 17:50
标题:
Swiper使用效果loop=true 时，第1个页面在手机没效果，求解决！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="swiper/swiper.min.css">
<link rel="stylesheet" href="swiper/animate.min.css">
<!-- Demo styles -->
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 第一页 -->
<div class="swiper-slide">
<img src="images/1-1.png" class="ani s1-1" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s"
swiper-animate-delay=".3s">
<img src="images/1-2.png" class="ani s1-1" swiper-animate-effect="zoomInUp"
swiper-animate-duration="1s" swiper-animate-delay="1.3s">
<img src="images/1-3.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
swiper-animate-duration="1s" swiper-animate-delay="2.3s">
<img src="images/1-4.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
swiper-animate-duration="1s" swiper-animate-delay="3.3s">
<img src="images/1-5.png" class="ani s1-1 infinite" swiper-animate-effect="flipInX"
swiper-animate-duration="1.5s"
swiper-animate-delay="4.3s">
<img src="images/1-6.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
swiper-animate-delay="5.3s">
</div>
<!--第二页-->
<div class="swiper-slide">
<img src="images/2-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
swiper-animate-duration="1.5s"
swiper-animate-delay=".3s">
<img src="images/2-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
swiper-animate-duration="1s" swiper-animate-delay="1.3s">
<img src="images/2-3.png" class="ani s1-1" swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s" swiper-animate-delay="2.3s">
<img src="images/2-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
swiper-animate-duration="1s" swiper-animate-delay="3.3s">
<img src="images/2-5.png" class="ani s1-1" swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="4.3s">
<img src="images/2-6.png" class="ani s1-1" swiper-animate-effect="flipInY" swiper-animate-duration="1s"
swiper-animate-delay="5.3s">
</div>
<!--第三页-->
<div class="swiper-slide">
<img src="images/3-1.png" class="ani s1-1 infinite" swiper-animate-effect="bounce"
swiper-animate-duration="1s"
swiper-animate-delay=".3s">
<img src="images/3-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
swiper-animate-duration="1s" swiper-animate-delay="1.3s">
<img src="images/3-3.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
swiper-animate-duration="1s" swiper-animate-delay="2.3s">
<img src="images/3-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
swiper-animate-duration="1s" swiper-animate-delay="3.3s">
<img src="images/3-5.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
swiper-animate-delay="4.3s">
<img src="images/3-6.png" class="ani s1-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
swiper-animate-delay="5.3s">
</div>
<!--第四页-->
<div class="swiper-slide">
<img src="images/4-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
swiper-animate-duration="1.5s"
swiper-animate-delay=".3s">
<img src="images/4-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
swiper-animate-duration="1s" swiper-animate-delay="1.3s">
<img src="images/4-3.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
swiper-animate-duration="1s" swiper-animate-delay="2.3s">
<img src="images/4-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
swiper-animate-duration="1s" swiper-animate-delay="3.3s">
<img src="images/4-5.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
swiper-animate-delay="4.3s">
<img src="images/4-6.png" class="ani s1-1" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s"
swiper-animate-delay="5.3s">
<img src="images/4-7.png" class="ani s1-1" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s"
swiper-animate-delay="6.3s">
</div>
<!--第五页-->
<div class="swiper-slide">
<img src="images/5-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
swiper-animate-duration="1.5s"
swiper-animate-delay=".3s">
<img src="images/5-2.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
swiper-animate-duration="1s" swiper-animate-delay="1.3s">
<img src="images/5-3.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
swiper-animate-duration="1s" swiper-animate-delay="2.3s">
<img src="images/5-4.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
swiper-animate-duration="1s" swiper-animate-delay="3.3s">
<img src="images/5-5.png" class="ani s1-1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"
swiper-animate-delay="4.3s">
<img src="images/5-6.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
swiper-animate-delay="5.3s">
<img src="images/5-7.png" class="ani s1-1" swiper-animate-effect="flipInY" swiper-animate-duration="1s"
swiper-animate-delay="6.3s">
</div>
<!--第六页-->
<div class="swiper-slide">
<img src="images/6-1.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
swiper-animate-delay=".3s">
<img src="images/6-2.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
swiper-animate-duration="1s" swiper-animate-delay="1.3s">
<img src="images/6-3.png" class="ani s1-1" swiper-animate-effect="zoomInLeft"
swiper-animate-duration="1s" swiper-animate-delay="2.3s">
<img src="images/6-4.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
swiper-animate-duration="1s" swiper-animate-delay="3.3s">
<img src="images/6-5.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
swiper-animate-delay="4.3s">
</div>
</div>
<img src="images/shou.png" class="shou" alt="">
</div>
</body>
<!-- Swiper JS -->
<script type="text/javascript" src="swiper/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript" src="swiper/swiper.jquery.min.js"></script>
<script type="text/javascript" src="swiper/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper);
swiperAnimate(swiper);
},
onSlideChangeEnd: function (swiper) {
swiperAnimate(swiper);
var a = swiper.activeIndex+1;
//alert(a)
if (a >= swiper.slides.length) {
$('.shou').hide();
} else {
$('.shou').show();
}
}
});
</script>
</html>
作者:
chen1110103
时间:
2015-6-7 22:49
要把loop设置为false
作者:
null
时间:
2015-6-26 10:58
loop就要设置为false，需要循环播，但是在滑动几屏后slide中的a标签的点击事件会很难触发，需多次点击
作者:
wxwking
时间:
2015-6-26 16:09
同问，这个问题困扰好久了，看来是animate不给力。
作者:
roger
时间:
2016-1-4 22:40
.........
作者:
忆影
时间:
2016-1-6 11:40
第一页 加上class .swiper-slide-active
作者:
xudong
时间:
2016-8-19 10:11
你用的这个animate插件是不支持loop:true;的
欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)
Powered by Discuz! X3.2
