Table of Contents

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.

 Demo and Code

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.

 Demo and Code

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.

Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Fancy Slider

Features:

  1. Clip-path for image masking rectangle border (webkit only).
  2. Blend-mode for this mask.
  3. 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!
  4. Cool credits side-menu (click small button in the center of demo).
  5. 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.

 Demo and Code

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.

 Demo and Code

Pokemon Slider

A slider animation with Pokemon design. Made by Pham Mikun.

See the Pen
Pokemon Slider
by Pham Mikun (@mikun)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code 

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.

 Demo and Code

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.

 Demo and Code 

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Slider UI

Slider UI with HTML, CSS and JavaScript. Made by Mergim Ujkani.

See the Pen
Slider UI
by Mergim Ujkani (@MergimUjkani)
on CodePen.

 Demo and Code

Slider GSAP

Slider GSAP virsion 2. Made by Em An.

See the Pen
Slider gsap | virsion: 02
by Em An (@Em-An)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Canvas Slider

HTML, CSS canvas slider. Made by Nvagelis.

See the Pen
canvas slider
by Nvagelis (@Nvagelis)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

CSS Slider

Responsive CSS slider. Made by geekwen.

See the Pen
CSS slider
by geekwen (@geekwen)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Dot Slider

Dot slider with HTML, CSS and JavaScript. Made by Derek Nguyen.

See the Pen
dot slider
by Derek Nguyen (@d4rek)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

Demo and Code

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.

 Demo and Code

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.

Demo and Code

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.

 Demo and Code

CSS Hover Slider

Pure CSS hover slider. Made by Hugo DarbyBrown.

See the Pen
CSS Hover Slider
by Hugo DarbyBrown (@hugo)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Feature Slider

Feature slider with HTML, CSS and JavaScript. Made by Andy Lorimer.

See the Pen
Feature Slider
by Andy Lorimer (@andylorimer)
on CodePen.

 Demo and Code

Animated Cube Slider

CSS only. Made by Alberto Hartzet.

See the Pen
Animated cube slider
by Alberto Hartzet (@hrtzt)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code