【第3348期】还在用 swiper.js 吗？CSS实现带指示器的swiper

主要观点总结

本文介绍了如何使用纯CSS实现一个带指示器的滑动组件（swiper），替代常用的JavaScript库swiper.js。文章详细讲解了CSS滚动吸附、滚动驱动动画、时间线范围、自动播放以及兼容性处理等技术。

关键观点总结

关键观点1: CSS滚动吸附的实现

通过CSS的scroll snap属性实现滚动吸附，通过定义吸附的方向和吸附程度以及吸附点的对齐方式，可以轻松实现滚动吸附效果。

关键观点2: 指示器联动的实现

利用CSS滚动驱动动画，通过覆盖的方式实现指示器的联动。详细讲解了如何添加动画、与滚动关联以及时间线范围的应用。

关键观点3: 自动播放的实现

通过监听animationiteration事件实现自动播放，每3秒执行一次轮播逻辑。同时介绍了如何通过CSS控制播放和暂停。

关键观点4: 回调事件的实现

通过监听scroll事件实现回调，当滑动偏移和容器尺寸的比例变化时触发。同时介绍了如何优化触发频率和判断滑动方向的逻辑。

关键观点5: 兼容性处理

对于不支持CSS滚动驱动动画的浏览器，通过监听回调事件手动关联指示器的状态。同时介绍了使用CSS支持判断的方法来处理兼容性。

文章预览

前言 介绍了如何使用纯 CSS 实现一个带指示器的滑动组件（swiper），替代常用的 JavaScript 库 swiper.js，并详细讲解了 CSS 滚动吸附、滚动驱动动画、时间线范围、自动播放以及兼容性处理等技术。今日前端早读课文章由 @XboxYan 分享，公号：前端侦探授权。 正文从这开始～～ 几乎每个前端开发都应该用过这个滑动组件库吧？这就是大名鼎鼎的 swiper.js 没想到已经出到 11 个大版本了 https://www.swiper.com.cn/ 当然我也不例外，确实非常全面，也非常强大。 【第3306期】纯 CSS 检测滚动的速度和方向 不过很多时候，我们可能只用到了它的 10% 不到的功能，显然是不划算的，也会有性能方面的顾虑。 随着 CSS 地不断发展，现在纯 CSS 也几乎能够实现这样一个 swiper 了，实现更加简单，更加轻量，性能也更好，完全足够日常使用，最近在项目中也碰到了一个 swiper 的 ………………………………