其二:项目遇到比较有点要求的轮播图,默认显示3张图片,中间显示全部,两边显示部分。如图:
网上找了也没有找到合适的,最后经过自己摸索写了出来,贴出代码分享给大家。
CSS
.swiper-container{margin-top:20px;width:750px;height:320px;margin-bottom:53px;overflow:visible!important;
}.swiper-container .swiper-wrapper .swiper-slide{width:620px;border-radius:20px;}.swiper-container .swiper-wrapper .swiper-slide img{width:100%;height:320px;border-radius:20px;}.swiper-container .swiper-wrapper .swiper-slide-prev{margin-top:18px;height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-prev img{height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-next{margin-top:18px;height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-next img{height:284px!important;}.swiper-container .swiper-wrapper .swiper-slide-active{width:620px;}.swiper-pagination{bottom:-30px!important;
}.swiper-pagination .swiper-pagination-bullet{width:12px;height:12px;background:#ff1e1e;}.swiper-pagination .swiper-pagination-bullet-active{width:21px;height:12px;background:#e75230;border-radius:6px;}
DOM
js
var mySwiper = new Swiper ('.swiper-container', {
direction:'horizontal',
loop:true,
autoplay:5000,
slidesPerView:"auto",
centeredSlides:true,
spaceBetween:20,//如果需要分页器
pagination: '.swiper-pagination',
})
以上就是我使用swiper的一点经验,其实对于swiper来说还是很浅显的,swiper加上TweenMax能做出很多很好很强大的动画和功能!下次有时间我会给大家分享点TweenMax的东西。。。