swiper 定义放多少张图片_swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分...

最新推荐文章于 2024-10-30 11:34:59 发布

原创最新推荐文章于 2024-10-30 11:34:59 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#swiper 定义放多少张图片

本文介绍如何用Swiper实现一个特殊的轮播图效果：默认显示3张图片，中间全显，两边部分显示。通过CSS和JS设置滑动参数，包括轮播方向、循环播放、自动切换、居中显示等，最终达到预期效果。

其二：项目遇到比较有点要求的轮播图，默认显示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

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的东西。。。