查看: 27151|回复: 9

终于明白如何做swiper的无缝滚动(走马灯)效果啦

[复制链接]

该用户从未签到

1

主题

1

帖子

23

积分

新手上路

Rank: 1

积分
23
发表于 2016-8-25 12:29:20 | 显示全部楼层 |阅读模式
之前研究过
先用论坛中某位大神的效果
var mySwiper1 = new Swiper('.swiper-container1',{
                        autoplay : 1,     
                        speed:3000,
                        loop : true,
                        freeMode:true,
                        slidesPerView : 5,
                        slidesPerGroup : 1,
                        prevButton:'.swiper-button-prev',
                        nextButton:'.swiper-button-next',
                });

使得swiper间隔一个元素滚动一下,autoplay : 1,    间隔一毫秒滚动一下。
然后修改swiper.css的代码
.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: linear;    /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

将参数改为linear就好啦!
回复

使用道具 举报

  • TA的每日心情
    擦汗
    2016-10-28 15:26
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    4

    帖子

    2447

    积分

    金牌会员

    Rank: 6Rank: 6

    积分
    2447
    发表于 2016-10-28 15:26:22 | 显示全部楼层
    遇到相同的问题,感谢楼主指点~
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2018-4-12 11:07
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    0

    主题

    13

    帖子

    48

    积分

    新手上路

    Rank: 1

    积分
    48
    发表于 2018-3-27 08:17:01 | 显示全部楼层
    111111111111111111111111111111
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2018-4-12 11:07
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    0

    主题

    13

    帖子

    48

    积分

    新手上路

    Rank: 1

    积分
    48
    发表于 2018-3-27 08:17:45 | 显示全部楼层
    请问没有demo吗
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    擦汗
    2018-4-8 17:12
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    8

    帖子

    20

    积分

    新手上路

    Rank: 1

    积分
    20
    发表于 2018-4-8 17:20:07 | 显示全部楼层
    来学习哈
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    6

    积分

    新手上路

    Rank: 1

    积分
    6
    发表于 2019-5-6 09:44:21 | 显示全部楼层
    感谢楼主分享
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    7

    帖子

    486

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    486
    发表于 2020-3-11 18:16:38 | 显示全部楼层
    学习一下
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    帖子

    6

    积分

    新手上路

    Rank: 1

    积分
    6
    发表于 2020-7-22 09:19:16 | 显示全部楼层
    可是滑动的时候速度不均匀啊
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    3

    帖子

    11

    积分

    新手上路

    Rank: 1

    积分
    11
    发表于 2022-1-9 19:35:02 | 显示全部楼层
    感谢楼主与
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2021-3-5 16:44
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    0

    主题

    21

    帖子

    55

    积分

    注册会员

    Rank: 2

    积分
    55
    发表于 2022-6-29 13:42:31 | 显示全部楼层
    1111111000000000000000
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2024-4-19 06:21 , Processed in 0.073818 second(s), 27 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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