風雲論壇脚本中心 → 浏览:帖子主题
* 帖子主题:【分享】scroll-snap 实现纯 css 的 swiper 轮播
風雲 (ID: 3)
头衔:论坛版主
等级:光明使者
积分:449
发帖:29
来自:保密
注册:2022/3/30 15:28:53
造访:2022/12/6 10:24:37
[ 第 1 楼 ] 回复
先来两个例子:

横向 swiper:

[您可以先修改代码再运行]

纵向 swiper:

[您可以先修改代码再运行]

相关CSS 属性说明:
scroll-snap-type: x mandatory
x 表示 横向,y 表示纵向,both 表示两个方向都自动滑动。
mandatory:用户停止滚动的时候,会自动选择一个子元素的点,不加这个属性,有可能卡在某个位置不滚动。

scroll-snap-align: start|center|end
start 为开端对齐,center 为中心对齐,end 为尾端对齐。
2022/4/11 18:24:19 IP:已设置保密
風雲 (ID: 3)
头衔:论坛版主
等级:光明使者
积分:449
发帖:29
来自:保密
注册:2022/3/30 15:28:53
造访:2022/12/6 10:24:37
[ 第 2 楼 ] 回复
鼠标拖动滚动条的情况下,需要超过 50% 才会触发;触屏的话,会根据速度(力度)自动判断滑动距离触发。导致会出现一个小问题,力度稍大,就会一次滑走多屏。
2022/4/11 18:39:35 IP:已设置保密
風雲 (ID: 3)
头衔:论坛版主
等级:光明使者
积分:449
发帖:29
来自:保密
注册:2022/3/30 15:28:53
造访:2022/12/6 10:24:37
[ 第 3 楼 ] 回复
搭配 JS 实现自动轮播:

[您可以先修改代码再运行]

2022/11/20 19:20:41 IP:已设置保密
風雲 (ID: 3)
头衔:论坛版主
等级:光明使者
积分:449
发帖:29
来自:保密
注册:2022/3/30 15:28:53
造访:2022/12/6 10:24:37
[ 第 4 楼 ] 回复
Windows 下面需要隐藏滚动条:

[您可以先修改代码再运行]

2022/11/20 19:24:11 IP:已设置保密
分页: 1, 共 1 页
快速回复主题
账号/密码
用户: 没有注册? 密码:
评论内容