Here the Collection of HTML and CSS Code Examples: Card Sliders, Comparison (Before/After) Sliders,Fullscreen Sliders, Responsive Sliders, Simple Sliders.
Information Card Slider
COMPARISON (BEFORE/AFTER) SLIDERS
IMAGE COMPARISON SLIDER
A before and after slider with only html and css. Made with HTML/CSS/SCSS by Matthew Steele.
BEFORE AFTER 3 LAYER IMAGE SLIDER
Before After Image Slider (Vanilla JS)
Vanilla JS, minimal, nice to look. Made by Huw.
SPLIT SCREEN UI
Before & After Slider Gallery With SVG Masks
A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it’s all SVG, the images and captions scale nicely together. GreenSock’s Draggable and ThrowProps plugins were used for the slider control. Made by Craig Roblewsky.
HTML5 Before & After Comparison Slider
Uses customised range input for slider. Made by Dudley Storey.
Responsive Image Comparison Slider
HTML5 Video Before-and-After Comparison Slider
Image Comparison Slider
A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. Made by CodyHouse.
PURE CSS SLIDER
Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys. Made with HTML/CSS by Kamil.
HORIZONTAL PARALLAX SLIDING SLIDER
SMOOTH 3D PERSPECTIVE SLIDER
Fullscreen Hero Image Slider
Velo.js Slider With Borders
A slider interaction thing using Velocity and Velocity effects (UI Pack) to enhance the animation. Animation is triggered via arrow keys, nav click, or scrolling jack. This version includes borders as part of the interaction. Made by Stephen Scaff.
Simple slider in a minimal style to show off images. Part of the image pops out on each slide. Made by Nathan Taylor.
Responsive Parallax Drag-slider With Transparent Letters
The thing is pretty easy customizable. You can safely change font, font size, font color, animation speed. The first letter of a new string in array in JS will appear on a new slide. Easy to create (or delete) a new slide: 1. Add new city in the array in JS. 2. Change number of slides variable and put a new image in scss list in CSS. Made by Ruslan Pivovarov.
- Clip-path for image masking rectangle border (webkit only).
- Blend-mode for this mask.
- Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
- Cool credits side-menu (click small button in the center of demo).
- Vanilla js with just < 200 lines of code (basically it’s just adds/removes classes).
Made by Nikolay Talanov
Gray & White – Skewed Slider With Scrolling
This skewed slider with scrolling based on pure JS and CSS (without libraries). Made by Victor Belozyorov.
A slider animation with Pokemon design. Made by Pham Mikun.
Slider With Half-Collored Angled Text
HTML, CSS and JavaScritp slider with complex animation and half-collored angled text. Made by Ruslan Pivovarov.
Slider Parallax Effect
Slider With Ripple Effect
Clip-Path Revealing Slider
GSAP + Slick slider with preview of previous/next slides. Made by Karlo Videk.
Full Page Slider
Full Slider Prototype
Greensock Animated Slideshow
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. Made by Arden.
Linear Slider With SplitText Effect
Linear slider with SplitText effect. Made by Arden.
Full-Screen Slider ( GSAP Timeline ) #1
Pure CSS Slider With Custom Effects
HTML and CSS slider with custom effects. Made by Nikolay Talanov.
Fullscreen Drag-Slider With Parallax
Actual Rotating Slider
Proof of concept rotating slider. Uses clip-path and lots of math. Made by Tyler Johnson.
Simple Responsive Fullscreen Slider
A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph.
IMAGES OPACITY SLIDER
Images opacity slider in HTML and CSS. Made with HTML/CSS by GDW.
STACKED FLEXIBLE SLIDES LAYOUT
This example illustrates how to create layout of slides stacked on each other (especially useful for fade in/out transitions). It’s achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow. Made with HTML/CSS by Kamil.
SLIDER WITH MASKED TEXT
CSS only slider with masked text. Made with HTML / CSS (SCSS) by Ting Chen.
OCEANIC OVERLAYS SLIDER
Image and content slider with parallax effect. Made with HTML / CSS (SCSS) by Shaw.
CSS only slide gallery. Made with HTML/CSS by Sam Gord.
PURE HTML/CSS SLIDER
Pure HTML/CSS slider with circular SVG progress bar. Made with HTML / CSS (SCSS) by Brandon McConnell.
RESPONSIVE CSS VERTICAL SLIDER WITH THUMBNAILS
An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images. Made with HTML/CSS/SCSS by Chen Hui Jing.
FLEXBOX IMAGE SLIDER
MOTION BLUR EFFECT USING SVG FILTERS
GREENSOCK ANIMATED SLIDER
CSS-ONLY IMAGE SLIDER USING SVG PATTERNS
Exploring some slider transitions. Swiper slider with parallax option enabled. Playing with CSS filters mostly here. Made by Mirko Zorić.
Simple GSAP slider with some subtle tween animations. Made by Goran Vrban.
Slider GSAP virsion 2. Made by Em An.
A little slicey transition slider using a simple add class deal. Have to smooth out the timings a bit and decide on the best approach for mobile (just stack, add touch events, make images full viewport, etc. Supports scrollwheel (scroll jacking), nav buttons and arrow keys. Can also increase the content wrapper to make the images fill viewport in their non animating state, which is kinda cool as well. Made by Stephen Scaff.
Slider Animation Effect
Leveraged CSS border-image & clip-path to create a slider animation effect. Made by Emily Hayman.
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area. Made by Robert.
HTML, CSS canvas slider. Made by Nvagelis.
CSS Only Cupcake Slider
HTML and CSS cupcake slider with sprinkles! Made by Jamie Coulter.
Exploring UI Animation #3
Exploring UI Animation #2
Exploring UI Animation #3
Ecommerce Slider v2.0
Clean Slider With Curved Background
Exploring UI animation #1
Slicing Images Pure CSS And More
Enjoy the power of CSS: Up & down each middle image and paginated slider with lightbox.
Made by Kseso.
Double Exposure Carousel Slider
Double exposure is photographic technique that combines 2 different images into a single image.Made by Misaki Nakano.
Slider using CSS3 property clip. Made by Pedro Castro.
Responsive CSS slider. Made by geekwen.
This is a simple slider experiment displaying words with beautiful meanings which cannot be directly translated. Focus: elegant typography and simple yet alluring transitions. Made by Joe Harry.
Image Slider With Masking Effect
The animation idea is to change the value of CSS clip path, thus make a masking effect.
Made by Bhakti Al Akbar.
Prism Effect Slider
Sliding Background Gallery
Sequence.js – Mono
A product slider powered by Sequence.js. Sequence.js – The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. Made by Ian Lunn.
Tiny Circle Slider
Tiny circle customized slider. Made by Bram de Haan.
Responsive GTA V Slider
A Cubey Slider
It’s like a slider but it rotates cubeishly for reasons unknown. Made by Eric Brewer.
CSS Hover Slider
Pure CSS hover slider. Made by Hugo DarbyBrown.
Image Overlay Slider
Pure CSS Featured Image Slider
HTML and CSS featured image slider. Made by Joshua Hibbert.
Simple pure CSS slider made with
<input type="radio">. Made with HTML/CSS by MAHESH AMBURE.
Animated Cube Slider
CSS only. Made by Alberto Hartzet.
Simple Image Slider
Features: – automatic slideshow – pause on hover – dynamic slide counter – show/hide controls on hover. Made by André Cortellini.
Multi Axis Image Slider
3D Cube Slider. Pure CSS
Cube slider, a small experiment with HTML5/CSS3 3d transforms. Made by Ilya K.