Swiper中文论坛

标题: swiper-slide 之间的间距和宽度如何设置 [打印本页]

作者: jph99354325 时间: 2017-7-31 22:09
标题: swiper-slide 之间的间距和宽度如何设置

swiper-slide 之间的间距和宽度如何设置

作者: scriptemmmm 时间: 2017-8-8 17:51
同问，有人知道怎么弄吗

作者: 菜鸟龙小仙 时间: 2017-8-11 14:55
有些问题真心不想回答，API多翻几遍就可以找到答案了：
http://www.swiper.com.cn/api/Slides_grid/2015/0308/198.html。
还有另外一种方法更优：
swiper设置slidesPerView :'auto'，
用样式给swiper-slide设置左右margin值

作者: kerwin_swiper 时间: 2018-6-14 16:17
楼上是 3 的用法，2呢？

作者: kerwin_swiper 时间: 2018-6-14 16:18

菜鸟龙小仙发表于 2017-8-11 14:55
有些问题真心不想回答，API多翻几遍就可以找到答案了：
http://www.swiper.com.cn/api/Slides_grid/2015/03 ...

2呢？我没找到

作者: chenbaixu123 时间: 2018-8-20 21:11
设定slide与左边框的预设偏移量（单位px）。

slidesOffsetBefore

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesOffsetBefore : 100,
})
</script>

作者: 曹宇的swiper 时间: 2018-8-30 14:52
这个好像不太好用， swiper3可以 2不可以， 2可以兼容IE78 头疼

作者: 飞尽堂前燕 时间: 2018-9-6 16:31
swiper2的话可以这样  (我是一行显示三个的)
css //调整间距
div.swiper-slide-active+div{
margin: 0px 15px;
}

js
//热门新闻 swiper
var newsSwiper = new Swiper('#newsSwiper', {
   loop: true,
   slidesPerView: 3.08,//这里可以设置小数，不过需要自己做调整了
})

作者: Raymondjay 时间: 2018-11-5 09:22
宽度自适应的话应该怎么做呢，
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 0,
freeMode: true,

});
这样虽然自适应但是不能滑动了

作者: 小白一枚ZZqq 时间: 2020-1-7 15:02
var swiper = new Swiper('.swiper-container', {
      slidesPerView: 2,
      spaceBetween: 40,
      centeredSlides: true,
      loop: false,
      pagination: {
         el: '.swiper-pagination',
         clickable: true,
      },
      });

第一个就是，第二个是间距

作者: zuzhichanglely 时间: 2020-2-9 15:06
贴合的图片在不同的数量下，有时候会出现1px的缝隙，直接把图片赋给swiper-slide标签上就可以了；

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)