查看: 38000|回复: 10
打印 上一主题 下一主题

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

[复制链接]

该用户从未签到

1

主题

4

帖子

16

积分

新手上路

Rank: 1

积分
16
跳转到指定楼层
楼主
发表于 2017-7-31 22:09:17 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
swiper-slide 之间的间距  和 宽度如何设置
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

0

主题

14

帖子

51

积分

注册会员

Rank: 2

积分
51
推荐
发表于 2017-8-11 14:55:37 | 只看该作者
有些问题真心不想回答,API多翻几遍就可以找到答案了:
http://www.swiper.com.cn/api/Slides_grid/2015/0308/198.html
还有另外一种方法更优:
swiper设置slidesPerView :'auto',
用样式给swiper-slide设置左右margin值
回复 支持 1 反对 0

使用道具 举报

  • TA的每日心情
    难过
    2017-8-8 11:10
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    4

    帖子

    7

    积分

    新手上路

    Rank: 1

    积分
    7
    沙发
    发表于 2017-8-8 17:51:35 | 只看该作者
    同问,有人知道怎么弄吗
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2018-3-16 14:34
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    7

    帖子

    47

    积分

    新手上路

    Rank: 1

    积分
    47
    地板
    发表于 2018-6-14 16:17:59 | 只看该作者
    楼上是 3 的用法,2呢?
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2018-3-16 14:34
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    7

    帖子

    47

    积分

    新手上路

    Rank: 1

    积分
    47
    5#
    发表于 2018-6-14 16:18:25 | 只看该作者
    菜鸟龙小仙 发表于 2017-8-11 14:55
    有些问题真心不想回答,API多翻几遍就可以找到答案了:
    http://www.swiper.com.cn/api/Slides_grid/2015/03 ...

    2呢? 我没找到
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    帖子

    8

    积分

    新手上路

    Rank: 1

    积分
    8
    6#
    发表于 2018-8-20 21:11:27 | 只看该作者
    设定slide与左边框的预设偏移量(单位px)。

    slidesOffsetBefore

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

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    4

    积分

    新手上路

    Rank: 1

    积分
    4
    7#
    发表于 2018-8-30 14:52:07 | 只看该作者
    这个好像不太好用, swiper3可以 2不可以, 2可以兼容IE78  头疼
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2018-7-18 10:11
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    3

    帖子

    20

    积分

    新手上路

    Rank: 1

    积分
    20
    8#
    发表于 2018-9-6 16:31:49 | 只看该作者
    swiper2的话 可以这样  (我是一行显示三个的)
    css //调整间距
    div.swiper-slide-active+div{
        margin: 0px 15px;
    }

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

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    7

    积分

    新手上路

    Rank: 1

    积分
    7
    9#
    发表于 2018-11-5 09:22:35 | 只看该作者
    宽度自适应的话 应该怎么做呢,
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        spaceBetween: 0,
        freeMode: true,
       
      });
    这样虽然自适应 但是不能滑动了
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    3

    积分

    新手上路

    Rank: 1

    积分
    3
    10#
    发表于 2020-1-7 15:02:14 | 只看该作者
    var swiper = new Swiper('.swiper-container', {
              slidesPerView: 2,
              spaceBetween: 40,
              centeredSlides: true,
              loop: false,
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
            });

    第一个就是,第二个是间距
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-4-20 13:31 , Processed in 0.094361 second(s), 30 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表