Swipers & Slide Shows with Scroll Snap
An exploration of swipers and slide shows using modern browser features like CSS Scroll Snap
A Basic CSS Only Swiper using CSS Scroll Snap
This is a slide show in the sense that you can swipe but it won’t automatically move. With proper page indicators this is basically the Instagram post swiper.
FYI this basketball is really sick and actually for sale here: Syntax Basketball
What is this missing to become a slide show?
- Working Page indicators
- Forward Prev Buttons
- Automatic
- Events? (only if you need it)
A Swiper With Active Indicators
If we want indicators to show what slide we’re on, buttons and timing, we’ll need to add a bit of JavaScript. Let’s do it