Collection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of May 2020 collection. 5 new items.
Table of Contents
Related Articles
Card Sliders

Links
Made with
- HTML/Haml
- CSS/SCSS
- JavaScript/CoffeeScript (jquery.js)
About the code
Onboarding Screens
A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.

Information Card Slider
HTML, CSS and JavaScript information card slider.
Made by Andy Tran
November 23, 2015

Elastic Slider
Photo slider working on desktop and mobile browsers.
Made by Taron
September 29, 2014
Comparison (Before/After) Sliders

Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (jquery.js)
About the code
Image Comparison Slider
A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

Links
Made with
- HTML
- CSS/SCSS
About the code
Javascriptless Before/After Slider
A before and after slider with only html and css.

Links
Made with
- HTML
- CSS
- JavaScript
About the 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 :)

Before After Image Slider (Vanilla JS)
Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2017

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Split Screen UI
A "split-screen" slider element with JavaScript.

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
April 17, 2017

HTML5 Before & After Comparison Slider
Uses customised range input for slider.
Made by Dudley Storey
October 14, 2016

Responsive Image Comparison Slider
Responsive image comparison slider with HTML, CSS and JavaScript.
Made by Ege Görgülü
August 3, 2016

HTML5 Video Before-and-After Comparison Slider
HTML5, CSS3 and JavaScript video before-and-after comparison slider.
Made by Dudley Storey
April 24, 2016

Image Comparison Slider
A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
Made by CodyHouse
September 15, 2014
Fullscreen Sliders
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Pure CSS ECommerce Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Pure CSS Slider
Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript
About the code
Slider Transition
Nice transition effect for fullscreen slider.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (swiper.js)
About the code
Horizontal Parallax Sliding Slider
Horizontal parallax sliding slider with Swiper.js.

Links
Made with
- HTML/Pug
- CSS
- JavaScript/Babel
About the code
Smooth 3D Perspective Slider
Responsive smooth 3D perspective slider on mouse move.

Fullscreen Hero Image Slider
Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript.
Made by Tobias Bogliolo
June 25, 2017

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
May 11, 2017

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
Jannuary 22, 2017

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
October 8, 2016

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).
October 7, 2016

Gray & White - Skewed Slider With Scrolling
This skewed slider with scrolling based on pure JS and CSS (without libraries).
Made by Victor Belozyorov
September 3, 2016

Pokemon Slider
A slider animation with Pokemon design.
Made by Pham Mikun
August 18, 2016

Slider With Half-Collored Angled Text
HTML, CSS and JavaScritp slider with complex animation and half-collored angled text.
Made by Ruslan Pivovarov
July 13, 2016

Slider Parallax Effect
Slider parallax effect with HTML, CSS and JavaScript.
Made by Manuel Madeira
June 28, 2016

Slider With Ripple Effect
HTML, CSS and JavaScript slider with ripple effect.
Made by Pedro Castro
May 21, 2016

Clip-Path Revealing Slider
Clip-Path revealing slider with HTML, CSS and JavaScript.
Made by Nikolay Talanov
May 16, 2016

Preview Slider
GSAP + Slick slider with preview of previous/next slides.
Made by Karlo Videk
April 27, 2016

Full Page Slider
HTML, CSS and JavaScript full page slider.
Made by Joseph Martucci
February 28, 2016

Full Slider Prototype
Full slider prototype with HTML, CSS and JavaScript.
Made by Gluber Sampaio
January 6, 2016

Greensock Animated Slideshow
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Made by Arden
December 12, 2015

Linear Slider With SplitText Effect
Linear slider with SplitText effect.
Made by Arden
December 5, 2015

Full-Screen Slider ( GSAP Timeline ) #1
Full-Screen slider (GSAP Timeline) #1 with HTML, CSS and JavaScript.
Made by Diaco M.Lotfollahi
November 23, 2015

Pure CSS Slider With Custom Effects
HTML and CSS slider with custom effects.
Made by Nikolay Talanov
November 12, 2015

Fullscreen Drag-Slider With Parallax
Fullscreen drag-slider with parallax with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015

Actual Rotating Slider
Proof of concept rotating slider. Uses clip-path and lots of math.
Made by Tyler Johnson
April 16, 2015

Simple Responsive Fullscreen Slider
A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph
August 19, 2014
Links
Made with
- HTML / CSS
About a code
CSS Slider with Keyboard Controls
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Responsive Sliders
Links
Made with
- HTML (Pug) / CSS (Sass)
About a code
Pure CSS Scroll-Snap Carousel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
CSS Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Slideshow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About a code
Pure CSS Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Smallest Slider Ever Without JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Images Opacity Slider
Images opacity slider in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the 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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About the code
Responsive Slider
Animated responsive slider in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: animate.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Slider With Masked Text
CSS only slider with masked text.
Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Oceanic Overlays Slider
Image and content slider with parallax effect.
Links
Made with
- HTML / CSS
About the code
CSS Slider
CSS only slide gallery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Pure HTML/CSS Slider
Pure HTML/CSS slider with circular SVG progress bar.
Compatible browsers: Chrome, Edge (partial), Firefox (partial), Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML
- CSS/SCSS
About the 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.

Links
Made with
- HTML
- CSS
- JavaScript
About the code
Flexbox Image Slider
A simple Flexbox image slider/carousel made with vanilla JavaScript.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js, slick.js)
About the 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.

Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript (jquery.js, tweenmax.js)
About the code
Greensock Animated Slider
Cool animates slider with JS.

Links
Made with
- HTML
- CSS/SCSS
- JavaScript
About the 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.

Slider Transitions
Exploring some slider transitions. Swiper slider with parallax option enabled. Playing with CSS filters mostly here.
Made by Mirko Zorić
June 12, 2017

GSAP Slider
Simple GSAP slider with some subtle tween animations.
Made by Goran Vrban
June 9, 2017

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

Slider GSAP
Slider GSAP virsion 2.
Made by Em An
May 4, 2017

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
January 3, 2017

Slider Animation Effect
Leveraged CSS border-image & clip-path to create a slider animation effect.
Made by Emily Hayman
December 31, 2016

Flexbox Slider
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
Made by Robert
November 28, 2016

Canvas Slider
HTML, CSS canvas slider.
Made by Nvagelis
October 29, 2016

CSS Only Cupcake Slider
HTML and CSS cupcake slider with sprinkles!
Made by Jamie Coulter
October 14, 2016

Exploring UI Animation #3
Exploring UI animation #3 with HTML, CSS and JavaScript.
Made by mario s maselli
October 12, 2016

Exploring UI Animation #2
Exploring UI animation #2 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016

Exploring UI Animation #3
Exploring UI animation #3 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016

Ecommerce Slider v2.0
Ecommerce Slider v2.0 with HTML, CSS and JavaScript.
Made by Pedro Castro
September 17, 2016

Clean Slider With Curved Background
HTML, CSS and JavaScript clean slider with curved background.
Made by Ruslan Pivovarov
September 13, 2016

Exploring UI animation #1
Exploring UI animation #1 with HTML, CSS and JavaScript.
Made by mario s maselli
September 8, 2016

Slicing Images Pure CSS And More
Enjoy the power of CSS: Up & down each middle image and paginated slider with lightbox.
Made by Kseso
August 15, 2016

Double Exposure Carousel Slider
Double exposure is photographic technique that combines 2 different images into a single image.
Made by Misaki Nakano
August 3, 2016

Slider
Slider using CSS3 property clip.
Made by Pedro Castro
May 1, 2016

CSS Slider
Responsive CSS slider.
Made by geekwen
April 19, 2016

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
April 5, 2016

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
March 31, 2016

Dot Slider
Dot slider with HTML, CSS and JavaScript.
Made by Derek Nguyen
March 16, 2016

Prism Effect Slider
Prism effect slider with HTML, CSS and JavaScript.
Made by victor
March 12, 2016

Sliding Background Gallery
Sliding background gallery with HTML, CSS and JavaScript.
Made by Ron Gierlach
November 30, 2015

Dual Slider
HTML, CSS and JavaScript slider solution.
Made by Jürgen Genser
September 30, 2015

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
September 15, 2015

Tiny Circle Slider
Tiny circle customized slider.
Made by Bram de Haan
August 11, 2015

Responsive GTA V Slider
Responsive GTA V slider with HTML, CSS and JavaScript.
Made by Eduard Mayer
January 24, 2014

A Cubey Slider
It's like a slider but it rotates cubeishly for reasons unknown.
Made by Eric Brewer
December 4, 2013

CSS Hover Slider
Pure CSS hover slider.
Made by Hugo DarbyBrown
August 28, 2013
Simple Sliders
Links
Made with
- HTML / CSS
About a code
Slider Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only: Carousel/Slider with Proper Sliding Between Slides
In this one I'm using CSS selectors and little hack/tricks to archive proper sliding effect between slides, the old one would be something like this when you change the slide: the 1st one goes backward(left) and the 2nd one comes forward(center) and if you change it to 3rd... the 2nd one goes backward(left) and the 3rd one comes forward(center) and so on... It makes sliding weird and most of the times we've to use JavaScript to archive proper sliding, so I start experimenting and is able to archive proper sliding effect with CSS only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Parallax Horizontal Image Scroller - No JS
Parallax is like a tarpaulin: if you don’t nail down all the corners, it just doesn’t work right. With vertical scrolling parallax effects a dime a dozen, I was shocked at how hard it was to find a good horizontal parallax effect that wasn’t loaded with jquery or other miscellaneous service calls or superheavy CSS like Bootstrap carousel. Why, I thought, is it so hard to find an explanation of horizontal parallax? It can’t really need all this extra scripting to work! So… I dug through websites and codepens plenty, breaking them to try and rewrite them and understanding how all the parts worked.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
Checkbox Hack
No checkbox at all. But classic href='#..'
plus :target
combo.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Only Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Image Overlay Slider
Image overlay slider with HTML, CSS and vanilla JavaScript.
Made by Yugam
June 7, 2017

Pure CSS Featured Image Slider
HTML and CSS featured image slider.
Made by Joshua Hibbert
June 16, 2016

Links
Made with
- HTML / CSS
About the code
CSS Slider
Simple pure CSS slider made with <input type="radio">

Feature Slider
Feature slider with HTML, CSS and JavaScript.
Made by Andy Lorimer
October 23, 2015

Animated Cube Slider
CSS only.
Made by Alberto Hartzet
May 6, 2015

Simple Image Slider
Features: - automatic slideshow - pause on hover - dynamic slide counter - show/hide controls on hover.
Made by André Cortellini
August 14, 2014

Multi Axis Image Slider
Multi axis image slider with HTML, CSS and JavaScript.
Made by Burak Can
July 22, 2013

3D Cube Slider. Pure CSS
Cube slider, a small experiment with HTML5/CSS3 3d transforms.
Made by Ilya K.
June 26, 2013
Links
Made with
- HTML / CSS
About a code
CSS Image Slider with Next/Prev Buttons
A 100% pure CSS image slider with previous/next buttons and image transitions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -