116 CSS Sliders
This collection explores versatile methods for building sliders without a single line of JavaScript. It covers the modern Scroll Snap API for touch-friendly, native scrolling physics, as well as the classic “Radio Hack” for creating click-to-slide navigation controls. Auto-playing galleries powered by @keyframes and smooth transitions using the :target pseudo-class are also featured. These lightweight, accessible solutions offer high performance and full customization for any web project.
Last updated:
CSS-Only Slider
A high-performance, interactive gallery featuring smooth sliding animations and functional navigation (pagination and arrows), achieved entirely with pure CSS, eliminating the need for script dependencies.
Smooth Scroll Image Gallery with Anchor Links
This component leverages the native browser feature scroll-behavior: smooth to create a fluid scrolling animation between sections. This is triggered by anchor links, providing a simple and performant way to build a slideshow without any complex JavaScript animation libraries.
The Witcher Monster Cards Slider
Showcases a stylish, interactive monster card slider, utilizing pure HTML and CSS for complex design, custom typography, and subtle image animations with a zoom/lift effect on hover.
Pure CSS Slideshow
A unique CSS-only image slider that uses advanced CSS properties like @property and :has() to control image transitions and UI elements. The background-position and nested radio buttons simulate a complex, fragmented image reveal effect without any JavaScript.
Modern Image Slider with Inverted Radius
A cross-browser JS slider with navigation and automatic switching. The key highlight is its simple and clear logic without external libraries, making it lightweight and flexible for any project.
