想用swiper实现一个这样子的需求...

实习战地记者 · 发表于 2016-3-14 11:02:35

容本人简单描述一下：
1、现在能够随机获取到若干张图片，把它们分别放在一个ul里面的每个li里，用swiper实现了滑动切换图片的效果。整个结构大概是div.swiper-container>ul.swiper-wrapper>li.swiper-slide 这样子，其中最外层的div宽度等于某个固定值。
2、然后老板提出新需求：在保持原本swiperjs实现了的各种效果的前提下，要在外层div的宽度范围内显示3张图片。好吧那我就把3张图片放到一个li里作为一组，出现第4张图片的话就再生成一组li，出现第7张就再生成一组...以此类推，这样就能3个为一组地进行滑动。
3、然后老板又提出了新需求...现在不是3个为一组么？如果只有4张图片，那滑动到第二组的时候就会有两张图片的空白多出来，老板表示这样不好看，到最后一张就不允许能够再滑动，改!

那么问题来了，如果像一开始那样把每张图片放到每个li里就不会有多余出空白的问题，但要怎么样才能同时实现div内显示3张图片的效果呢？不知道swiper有没有相关的方法或属性能解决这个问题，或者希望大神们发表一下你们的解决思路和见解，谢谢！

admin · 发表于 2016-3-15 09:41:14

slidesPerView:3

实习战地记者 · 发表于 2016-3-16 17:29:54

ivan118 发表于 2016-3-15 17:11
过来看看。

呃问题已解决，感谢您的关注

实习战地记者 · 发表于 2016-3-16 17:29:00

admin 发表于 2016-3-15 09:41
slidesPerView:3

嗯发现了这个API了，虽然最后还是辛辛苦苦自己写了一个出来......都怪自己当初看文档看得不够仔细。下次会看清楚些再提问。谢谢管理员大大~

ivan118 · 发表于 2016-3-15 17:11:40

过来看看。

实习战地记者 · 发表于 2016-3-14 11:14:14

补充一下，或许有人会说把li的宽度缩小成div的1/3不就好了？事实上我发现这是有困难的，因为缩小了li之后，会有一大片的空白多出来（具体效果可以去尝试感受下这里不作详细说明）。那么缩小li里面的图片为div的1/3呢？也不行，因为li.swiper-slide的宽度会撑满整个div.swiper-container，出现的效果就是图片是缩小了，但整个div里只显示一张图片