查看: 20319|回复: 8

终于明白如何做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

    帖子

    2265

    积分

    金牌会员

    Rank: 6Rank: 6

    积分
    2265
    发表于 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

    主题

    13

    帖子

    23

    积分

    新手上路

    Rank: 1

    积分
    23
    发表于 2020-2-28 14:33:03 | 显示全部楼层
    5G竞速旗舰”realme真我X50 Pro 5G,是realme首款5G旗舰智能手机,机身采用金属中框,具有“青苔”和“红锈”两种2020 年流极速飞艇行的莫兰迪色系配色,屏幕表面和机身后盖采用AG工艺的3D康宁大猩猩5代玻璃,并采用AG表面处理工艺,坚固耐用的同时更是充满高级质感;首批搭载高通骁龙865 5G移动平台,拥有LPDDR5和UFS 3.0+Turbo Write+HPB,性能强悍。realme真我X50 Pro 5G还具福彩双色球有颇多亮点,首发全新65W SuperDart超级闪充技术,支持亮屏充电,边玩边充,仅需35分钟就能充满4200mAh双电芯电池;搭载基于Android 10的全新realme UI,坚持真实、年轻、简约、有设计感的“本真设计”原则,更有全功能NFC、线性马达、双频GPS、双超线性扬声器,由杜比提供技福彩七乐彩术并支持调试带来高品质Dolby Atmos杜比全景声体验,并通过Hi-Res“小金标”高品质音频认证,全面提升使用体验。
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    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 | 显示全部楼层
    可是滑动的时候速度不均匀啊
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2020-11-27 16:32 , Processed in 0.267066 second(s), 29 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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