Here the Collection of HTML and CSS Code Examples: Card Sliders, Comparison (Before/After) Sliders,Fullscreen Sliders, Responsive Sliders, Simple Sliders.
CARD SLIDERS
ONBOARDING SCREENS
A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox. Made with HTML/Haml/CSS/SCSS/JavaScript/CoffeeScript (jquery.js) by Jeff Ham.
See the Pen
Onboarding Screens by Jeff Ham (@jebbles)
on CodePen.
Information Card Slider
HTML, CSS and JavaScript information card slider. Made by Andy Tran.
See the Pen
Information Card Slider by Andy Tran (@andytran)
on CodePen.
COMPARISON (BEFORE/AFTER) SLIDERS
IMAGE COMPARISON SLIDER
A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery. Made with HTML/CSS/SCSS/JavaScript/Babel (jquery.js) by Mario Duarte.
JAVASCRIPTLESS BEFORE/AFTER SLIDER
A before and after slider with only html and css. Made with HTML/CSS/SCSS by Matthew Steele.
See the Pen
Javascriptless Before/After Slider by Matthew Steele (@Streetproject)
on CodePen.
BEFORE AFTER 3 LAYER IMAGE SLIDER
Playing around with a new idea using my two layer before/after image slider. Keeping it minimal. Keeping it vanilla. Like it if it’s useful. Made with HTML/CSS/JavaScript by Huw Llewellyn.
See the Pen
Before After 3 Layer Image Slider (Vanilla) by Huw Llewellyn (@nosurprisethere)
on CodePen.
Before After Image Slider (Vanilla JS)
Vanilla JS, minimal, nice to look. Made by Huw.
See the Pen
Before After Image Slider (Vanilla) by Huw Llewellyn (@nosurprisethere)
on CodePen.
SPLIT SCREEN UI
A “split-screen” slider element with JavaScript. Made with HTML/CSS/JavaScript by Envato Tuts+.
See the Pen
Split-Screen UI by Envato Tuts+ (@tutsplus)
on CodePen.
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.
See the Pen
Before & After Slider Gallery With SVG Masks by Craig Roblewsky (@PointC)
on CodePen.
HTML5 Before & After Comparison Slider
Uses customised range input for slider. Made by Dudley Storey.
See the Pen
HTML5 Before & After Comparison Slider by Dudley Storey (@dudleystorey)
on CodePen.
Responsive Image Comparison Slider
Responsive image comparison slider with HTML, CSS and JavaScript. Made by Ege Görgülü.
See the Pen
Responsive Image Comparison Slider by Ege Görgülü (@bamf)
on CodePen.
HTML5 Video Before-and-After Comparison Slider
HTML5, CSS3 and JavaScript video before-and-after comparison slider. Made by Dudley Storey.
See the Pen
HTML5 Video Before-and-After Comparison Slider by Dudley Storey (@dudleystorey)
on CodePen.
Image Comparison Slider
A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. Made by CodyHouse.
See the Pen
Image Comparison Slider by CodyHouse (@codyhouse)
on CodePen.
FULLSCREEN SLIDERS
PURE CSS SLIDER
Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys. Made with HTML/CSS by Kamil.
See the Pen
Pure css slider by Kamil (@KamilDyrek)
on CodePen.
SLIDER TRANSITION
Nice transition effect for fullscreen slider. Made with HTML/Pug/CSS/SCSS/JavaScript by Inner DonalLogue.
See the Pen
Slider Transition (WIP) by BryanE (@bryan-erwin)
on CodePen.
HORIZONTAL PARALLAX SLIDING SLIDER
Horizontal parallax sliding slider with Swiper.js. Made with HTML/CSS/SCSS/JavaScript (swiper.js) by digistat.
See the Pen
Horizontal parallax sliding slider with Swiper.js by digistate (@digistate)
on CodePen.
SMOOTH 3D PERSPECTIVE SLIDER
Responsive smooth 3D perspective slider on mouse move. Made with HTML/Pug/CSS/JavaScript/Babel by Alex Nozdriukhi.
See the Pen
Smooth 3d perspective slider by Alex Nozdriukhin (@alexnoz)
on CodePen.
Fullscreen Hero Image Slider
Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript. Made by Tobias Bogliolo.
See the Pen
jQuery | Fullscreen Hero Image Slider (Swipe Panels Theme) by Tobias Bogliolo (@tobiasdev)
on CodePen.
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.
See the Pen
Velo Slider – with Borders by Stephen Scaff (@StephenScaff)
on CodePen.
Popout Slider
Simple slider in a minimal style to show off images. Part of the image pops out on each slide. Made by Nathan Taylor.
See the Pen
Popout Slider by Nathan Taylor (@nathantaylor)
on CodePen.
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.
See the Pen
Responsive Parallax Drag-slider With Transparent Letters by Ruslan Pivovarov (@mrspok407)
on CodePen.
Fancy Slider
Features:
- 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
See the Pen
Fancy Slider by Nikolay Talanov (@suez)
on CodePen.
Gray & White – Skewed Slider With Scrolling
This skewed slider with scrolling based on pure JS and CSS (without libraries). Made by Victor Belozyorov.
See the Pen
Gray & White – Skewed Slider with Scrolling by Victor Belozyorov (@WispProxy)
on CodePen.
Pokemon Slider
A slider animation with Pokemon design. Made by Pham Mikun.
See the Pen
Pokemon Slider by Pham Mikun (@mikun)
on CodePen.
Slider With Half-Collored Angled Text
HTML, CSS and JavaScritp slider with complex animation and half-collored angled text. Made by Ruslan Pivovarov.
See the Pen
Slider with complex animation and half-collored angled text by Ruslan Pivovarov (@mrspok407)
on CodePen.
Slider Parallax Effect
Slider parallax effect with HTML, CSS and JavaScript. Made by Manuel Madeira.
See the Pen
Slider Parallax Effect by Manuel Madeira (@mmadeira)
on CodePen.
Slider With Ripple Effect
HTML, CSS and JavaScript slider with ripple effect. Made by Pedro Castro.
See the Pen
Slider with Ripple Effect v1.1 by Pedro Castro (@pedrocastro)
on CodePen.
Clip-Path Revealing Slider
Clip-Path revealing slider with HTML, CSS and JavaScript. Made by Nikolay Talanov.
See the Pen
Clip-Path Revealing Slider by Nikolay Talanov (@suez)
on CodePen.
Preview Slider
GSAP + Slick slider with preview of previous/next slides. Made by Karlo Videk.
See the Pen
Preview slider by Karlo Videk (@karlovidek)
on CodePen.
Full Page Slider
HTML, CSS and JavaScript full page slider. Made by Joseph Martucci.
See the Pen
Full Page Slider by Joseph Martucci (@jjmartucci)
on CodePen.
Full Slider Prototype
Full slider prototype with HTML, CSS and JavaScript. Made by Gluber Sampaio.
See the Pen
Full Slider Prototype by Gluber Sampaio (@glaubersampaio)
on CodePen.
Greensock Animated Slideshow
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. Made by Arden.
See the Pen
Greensock animated slideshow [wip] by Arden (@aderaaij)
on CodePen.
Linear Slider With SplitText Effect
Linear slider with SplitText effect. Made by Arden.
See the Pen
Linear slider with SplitText effect | Greensock by Arden (@aderaaij)
on CodePen.
Full-Screen Slider ( GSAP Timeline ) #1
Full-Screen slider (GSAP Timeline) #1 with HTML, CSS and JavaScript. Made by Diaco M.Lotfollahi.
See the Pen
Full-Screen Slider ( GSAP Timeline ) #1 by Diaco M.Lotfollahi (@MAW)
on CodePen.
Pure CSS Slider With Custom Effects
HTML and CSS slider with custom effects. Made by Nikolay Talanov.
See the Pen
Pure css slider with custom effects by Nikolay Talanov (@suez)
on CodePen.
Fullscreen Drag-Slider With Parallax
Fullscreen drag-slider with parallax with HTML, CSS and JavaScript. Made by Nikolay Talanov.
See the Pen
Fullscreen drag-slider with parallax by Nikolay Talanov (@suez)
on CodePen.
Actual Rotating Slider
Proof of concept rotating slider. Uses clip-path and lots of math. Made by Tyler Johnson.
See the Pen
Actual Rotating Slider by Tyler Johnson (@tylernj42)
on CodePen.
Simple Responsive Fullscreen Slider
A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph.
See the Pen
simple responsive fullscreen slider by Joseph (@jibbon)
on CodePen.
RESPONSIVE SLIDERS
IMAGES OPACITY SLIDER
Images opacity slider in HTML and CSS. Made with HTML/CSS by GDW.
See the Pen
images opacity slider by GDW (@x-wang)
on CodePen.
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.
See the Pen
Stacked flexible slides layout by Kamil (@KamilDyrek)
on CodePen.
RESPONSIVE SLIDER
Animated responsive slider in HTML, CSS and JavaScript by Nicolas Caqueux.
See the Pen
Yarden (Design By Olya Marchak) by Nicolas Caqueux (@semicorpus)
on CodePen.
SLIDER WITH MASKED TEXT
CSS only slider with masked text. Made with HTML / CSS (SCSS) by Ting Chen.
See the Pen
Masked Text w/ Navigation (CSS Only) by Ting Chen (@tingc10)
on CodePen.
OCEANIC OVERLAYS SLIDER
Image and content slider with parallax effect. Made with HTML / CSS (SCSS) by Shaw.
See the Pen
@keyframers 1.7.0 | Oceanic Overlays by Shaw (@shshaw)
on CodePen.
CSS SLIDER
CSS only slide gallery. Made with HTML/CSS by Sam Gord.
See the Pen
@dhanishgajjar’s CSS Challenge #3 by Sam Gord (@simonestic)
on CodePen.
PURE HTML/CSS SLIDER
Pure HTML/CSS slider with circular SVG progress bar. Made with HTML / CSS (SCSS) by Brandon McConnell.
See the Pen
Pure HTML/CSS Slider + Circular SVG Progress Bar by Brandon McConnell (@brandonmcconnell)
on CodePen.
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.
See the Pen
Responsive CSS vertical slider with thumbnails by Chen Hui Jing (@huijing)
on CodePen.
FLEXBOX IMAGE SLIDER
A simple Flexbox image slider/carousel made with vanilla JavaScript. Made with HTML/CSS/JavaScript by Katherine Kato.
See the Pen
Flexbox Image Slider by Katherine Kato (@kathykato)
on CodePen.
MOTION BLUR EFFECT USING SVG FILTERS
This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality. Made with HTML/CSS/SCSS/JavaScript (jquery.js, slick.js) by Damián Muti.
See the Pen
Motion blur effect using SVG filters by Damián Muti (@damianmuti)
on CodePen.
GREENSOCK ANIMATED SLIDER
Cool animates slider with JS. Made with HTML/Pug/CSS/SCSS/JavaScript (jquery.js, tweenmax.js) by Artur Sedlukha.
See the Pen
Greensock animated slider by Artur Sedlukha (@sedlukha)
on CodePen.
CSS-ONLY IMAGE SLIDER USING SVG PATTERNS
This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider. Made with HTML/CSS/SCSS/JavaScript by Damián Muti.
See the Pen
CSS-only image slider using SVG patterns by Damián Muti (@damianmuti)
on CodePen.
Slider Transitions
Exploring some slider transitions. Swiper slider with parallax option enabled. Playing with CSS filters mostly here. Made by Mirko Zorić.
See the Pen
Slider transitions by Mirko Zorić (@fluxus)
on CodePen.
GSAP Slider
Simple GSAP slider with some subtle tween animations. Made by Goran Vrban.
See the Pen
GSAP slider by Goran Vrban (@gvrban)
on CodePen.
Slider UI
Slider UI with HTML, CSS and JavaScript. Made by Mergim Ujkani.
See the Pen
Slider UI by Mergim Ujkani (@MergimUjkani)
on CodePen.
Slider GSAP
Slider GSAP virsion 2. Made by Em An.
See the Pen
Slider gsap | virsion: 02 by Em An (@Em-An)
on CodePen.
Slice Slider
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.
See the Pen
Slice Slider by Stephen Scaff (@StephenScaff)
on CodePen.
Slider Animation Effect
Leveraged CSS border-image & clip-path to create a slider animation effect. Made by Emily Hayman.
See the Pen
Slider Animation Effect by Emily Hayman (@eehayman)
on CodePen.
Flexbox Slider
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area. Made by Robert.
See the Pen
Flexbox slider by Robert (@rendro)
on CodePen.
Canvas Slider
HTML, CSS canvas slider. Made by Nvagelis.
See the Pen
canvas slider by Nvagelis (@Nvagelis)
on CodePen.
CSS Only Cupcake Slider
HTML and CSS cupcake slider with sprinkles! Made by Jamie Coulter.
See the Pen
CSS Only Cupcake Slider with Sprinkles! by Jamie Coulter (@jcoulterdesign)
on CodePen.
Exploring UI Animation #3
Exploring UI animation #3 with HTML, CSS and JavaScript. Made by mario s maselli.
See the Pen
Exploring UI Animation #4 by mario s maselli (@mariosmaselli)
on CodePen.
Exploring UI Animation #2
Exploring UI animation #2 with HTML, CSS and JavaScript. Made by mario s maselli.
See the Pen
Exploring UI Animation #2 by mario s maselli (@mariosmaselli)
on CodePen.
Exploring UI Animation #3
Exploring UI animation #3 with HTML, CSS and JavaScript. Made by mario s maselli.
See the Pen
Exploring UI Animation #3 by mario s maselli (@mariosmaselli)
on CodePen.
Ecommerce Slider v2.0
Ecommerce Slider v2.0 with HTML, CSS and JavaScript. Made by Pedro Castro.
See the Pen
Ecommerce Slider v2.1 by Pedro Castro (@pedrocastro)
on CodePen.
Clean Slider With Curved Background
HTML, CSS and JavaScript clean slider with curved background. Made by Ruslan Pivovarov.
See the Pen
Clean Slider With Curved Background by Ruslan Pivovarov (@mrspok407)
on CodePen.
Exploring UI animation #1
Exploring UI animation #1 with HTML, CSS and JavaScript. Made by mario s maselli.
See the Pen
Exploring UI Animation #1 by mario s maselli (@mariosmaselli)
on CodePen.
Slicing Images Pure CSS And More
Enjoy the power of CSS: Up & down each middle image and paginated slider with lightbox.
Made by Kseso.
See the Pen
slicing images pure Css and more by Kseso (@Kseso)
on CodePen.
Double Exposure Carousel Slider
Double exposure is photographic technique that combines 2 different images into a single image.Made by Misaki Nakano.
See the Pen
double exposure carousel slider by Misaki Nakano (@mnmxmx)
on CodePen.
Slider
Slider using CSS3 property clip. Made by Pedro Castro.
See the Pen
Slider using property Clip v.2.0 by Pedro Castro (@pedrocastro)
on CodePen.
CSS Slider
Responsive CSS slider. Made by geekwen.
See the Pen
CSS slider by geekwen (@geekwen)
on CodePen.
Untranslatable
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.
See the Pen
Untranslatable by Joe Harry (@woodwoerk)
on CodePen.
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.
See the Pen
Image Slider with Masking Effect by Bhakti Al Akbar (@balapa)
on CodePen.
Dot Slider
Dot slider with HTML, CSS and JavaScript. Made by Derek Nguyen.
See the Pen
dot slider by Derek Nguyen (@d4rek)
on CodePen.
Prism Effect Slider
Prism effect slider with HTML, CSS and JavaScript. Made by victor.
See the Pen
Prism Effect Slider by victor (@vkanet)
on CodePen.
Sliding Background Gallery
Sliding background gallery with HTML, CSS and JavaScript. Made by Ron Gierlach.
See the Pen
Sliding Background Gallery by Ron Gierlach (@youfoundron)
on CodePen.
Dual Slider
HTML, CSS and JavaScript slider solution. Made by Jürgen Genser.
See the Pen
Dual Slider by Jürgen Genser (@juergengenser)
on CodePen.
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.
See the Pen
Sequence.js – Mono by Ian Lunn (@IanLunn)
on CodePen.
Tiny Circle Slider
Tiny circle customized slider. Made by Bram de Haan.
See the Pen
Tiny Circle Slider – Customized by Bram de Haan (@atelierbram)
on CodePen.
Responsive GTA V Slider
Responsive GTA V slider with HTML, CSS and JavaScript. Made by Eduard Mayer.
See the Pen
Responsive GTA V Slider by Eduard Mayer (@codewunder)
on CodePen.
A Cubey Slider
It’s like a slider but it rotates cubeishly for reasons unknown. Made by Eric Brewer.
See the Pen
A Cubey Slider (webkit) by Eric Brewer (@ebrewe)
on CodePen.
CSS Hover Slider
Pure CSS hover slider. Made by Hugo DarbyBrown.
See the Pen
CSS Hover Slider by Hugo DarbyBrown (@hugo)
on CodePen.
SIMPLE SLIDERS
Image Overlay Slider
Image overlay slider with HTML, CSS and vanilla JavaScript. Made by Yugam.
See the Pen
Image Overlay Slider by Yugam (@pizza3)
on CodePen.
Pure CSS Featured Image Slider
HTML and CSS featured image slider. Made by Joshua Hibbert.
See the Pen
Pure CSS Featured Image Slider by Joshua Hibbert (@joshnh)
on CodePen.
CSS SLIDER
CSS SLIDER
Simple pure CSS slider made with <input type="radio">. Made with HTML/CSS by MAHESH AMBURE.
See the Pen
Testimonial Slider Pure CSS by MAHESH AMBURE (@maheshambure21)
on CodePen.
Feature Slider
Feature slider with HTML, CSS and JavaScript. Made by Andy Lorimer.
See the Pen
Feature Slider by Andy Lorimer (@andylorimer)
on CodePen.
Animated Cube Slider
CSS only. Made by Alberto Hartzet.
See the Pen
Animated cube slider by Alberto Hartzet (@hrtzt)
on CodePen.
Simple Image Slider
Features: – automatic slideshow – pause on hover – dynamic slide counter – show/hide controls on hover. Made by André Cortellini.
See the Pen
Simple Image Slider by André Cortellini (@AndreCortellini)
on CodePen.
Multi Axis Image Slider
Multi axis image slider with HTML, CSS and JavaScript. Made by Burak Can.
See the Pen
Multi axis image slider by Burak Can (@neoberg)
on CodePen.
3D Cube Slider. Pure CSS
Cube slider, a small experiment with HTML5/CSS3 3d transforms. Made by Ilya K.
See the Pen
3D Cube slider. Pure CSS. by Ilya K. (@fornyhucker)
on CodePen.
