手机响应式幻灯片 swiper.js

近期做了一些响应式的项目,涉及到幻灯片的响应式以及可滑动功能!

就找了一款swiper.js的插件来实现,但是发现它只是宽度响应,而高度却没有响应;

所以我就加了一点代码修改了一下,现在是没问题了,给大家分享出来:

引用文件:idangerous.swiper.cssjquery-1.11.1.min.jsidangerous.swiper.min.js

html

<section>
<!-- banner start -->
<div class="device">
 <a class="arrow-left" href="#"></a> 
 <a class="arrow-right" href="#"></a>
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide"> <img src="images/slider/banner01.png" class="img-responsive" width="100%"> </div>
 <div class="swiper-slide"> <img src="images/slider/banner01.png" class="img-responsive" width="100%"> </div>
 <div class="swiper-slide"> <img src="images/slider/banner01.png" class="img-responsive" width="100%"> </div>
 </div>
 </div>
 <div class="pagination"></div>
</div>
<!-- banner end -->
</section>

javascript

//swiper banner start
var mySwiper = new Swiper('.swiper-container',{
 pagination: '.pagination',
 loop:true,//循环模式 是/否
 grabCursor: true,//光标属性 当为true时,光标移动到banner上变成手掌的样式
 paginationClickable: false,//生成分页控件
 calculateHeight:true,//响应式容器高度
 autoplay:3000//过度时间
})
$(window).resize(function(){
 var h=$(".swiper-slide").find("img").height();
 $(".swiper-wrapper,.swiper-slide").css("height",h)
})

$('.arrow-left').on('click', function(e){
 e.preventDefault()
 mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
 e.preventDefault()
 mySwiper.swipeNext()
})

具体方法我已经整理成文件,可以预览查看效果,也可以直接下载浏览源码:

在线演示源码下载

觉得不错,赞助我:





0

效果图如下:

手机响应式幻灯片 swiper.js

……-…… 2015/10/05 23:07

…..还是不行

回复

马达 2015/10/05 23:01

把calculateHeight:true, 删掉测试后正常,发现官方文档也是有这个属性的,不懂什么情况,按F12刷新后,注意看banner 这几个字,会卡一下。换成二张以上不同的photo,bug就会更明显了

回复

马达 2015/10/05 22:54

经测试发现,这个demo,有个bug,调整页面宽度刷新,第一张图片显示有问题!

回复

    ljiong 2015/10/30 14:12

    不是吧,我测试了,还是没发现你说的问题哦

    回复

搜索 2015/07/22 20:03

牛逼

回复