Top 89 CSS Sliders

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.

 Demo and Code

Information Card Slider

HTML, CSS and JavaScript information card slider. Made by Andy Tran.

 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.

 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.

 Demo and Code

Before After Image Slider (Vanilla JS)

Vanilla JS, minimal, nice to look. Made by Huw.

 Demo and Code

SPLIT SCREEN UI

A “split-screen” slider element with JavaScript. Made with HTML/CSS/JavaScript by Envato Tuts+.

 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.

 Demo and Code

HTML5 Before & After Comparison Slider

Uses customised range input for slider. Made by Dudley Storey.

 Demo and Code

Responsive Image Comparison Slider

Responsive image comparison slider with HTML, CSS and JavaScript. Made by Ege Görgülü.

 Demo and Code

HTML5 Video Before-and-After Comparison Slider

HTML5, CSS3 and JavaScript video before-and-after comparison slider. Made by Dudley Storey.

 Demo and Code

Image Comparison Slider

A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. Made by CodyHouse.

 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.

 Demo and Code

SLIDER TRANSITION

Nice transition effect for fullscreen slider. Made with HTML/Pug/CSS/SCSS/JavaScript by Inner DonalLogue.

 Demo and Code

HORIZONTAL PARALLAX SLIDING SLIDER

Horizontal parallax sliding slider with Swiper.js. Made with HTML/CSS/SCSS/JavaScript (swiper.js) by digistat.

 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.

 Demo and Code

Fullscreen Hero Image Slider

Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript. Made by Tobias Bogliolo.

 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.

 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.

 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.

 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

 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.

 Demo and Code

Pokemon Slider

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

 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.

 Demo and Code

Slider Parallax Effect

Slider parallax effect with HTML, CSS and JavaScript. Made by Manuel Madeira.

 Demo and Code

Slider With Ripple Effect

HTML, CSS and JavaScript slider with ripple effect. Made by Pedro Castro.

 Demo and Code

Clip-Path Revealing Slider

Clip-Path revealing slider with HTML, CSS and JavaScript. Made by Nikolay Talanov.

 Demo and Code

Preview Slider

GSAP + Slick slider with preview of previous/next slides. Made by Karlo Videk.

 Demo and Code

Full Page Slider

HTML, CSS and JavaScript full page slider. Made by Joseph Martucci.

 Demo and Code

Full Slider Prototype

Full slider prototype with HTML, CSS and JavaScript. Made by Gluber Sampaio.

 Demo and Code

Greensock Animated Slideshow

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. Made by Arden.

 Demo and Code

Linear Slider With SplitText Effect

Linear slider with SplitText effect. Made by Arden.

 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.

 Demo and Code

Pure CSS Slider With Custom Effects

HTML and CSS slider with custom effects. Made by Nikolay Talanov.

 Demo and Code

Fullscreen Drag-Slider With Parallax

Fullscreen drag-slider with parallax with HTML, CSS and JavaScript. Made by Nikolay Talanov.

 Demo and Code

Actual Rotating Slider

Proof of concept rotating slider. Uses clip-path and lots of math. Made by Tyler Johnson.

 Demo and Code

Simple Responsive Fullscreen Slider

A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph.

 Demo and Code

RESPONSIVE SLIDERS

IMAGES OPACITY SLIDER

Images opacity slider in HTML and CSS. Made with HTML/CSS by GDW.

 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.

 Demo and Code

RESPONSIVE SLIDER

Animated responsive slider in HTML, CSS and JavaScript by  Nicolas Caqueux.

 Demo and Code 

SLIDER WITH MASKED TEXT

CSS only slider with masked text. Made with HTML / CSS (SCSS) by Ting Chen.

 Demo and Code

OCEANIC OVERLAYS SLIDER

Image and content slider with parallax effect. Made with HTML / CSS (SCSS) by Shaw.

 Demo and Code

CSS SLIDER

CSS only slide gallery. Made with HTML/CSS by Sam Gord.

 Demo and Code

PURE HTML/CSS SLIDER

Pure HTML/CSS slider with circular SVG progress bar. Made with HTML / CSS (SCSS) by Brandon McConnell.

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.

 Demo and Code

FLEXBOX IMAGE SLIDER

A simple Flexbox image slider/carousel made with vanilla JavaScript. Made with HTML/CSS/JavaScript by Katherine Kato.

 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.

 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.

 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.

 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ć.

 Demo and Code

GSAP Slider

Simple GSAP slider with some subtle tween animations. Made by Goran Vrban.

 Demo and Code

Slider UI

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

 Demo and Code

Slider GSAP

Slider GSAP virsion 2. Made by Em An.

 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.

 Demo and Code

Slider Animation Effect

Leveraged CSS border-image & clip-path to create a slider animation effect. Made by Emily Hayman.

 Demo and Code

Flexbox Slider

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

 Demo and Code

Canvas Slider

HTML, CSS canvas slider. Made by Nvagelis.

 Demo and Code

CSS Only Cupcake Slider

HTML and CSS cupcake slider with sprinkles! Made by Jamie Coulter.

 Demo and Code

Exploring UI Animation #3

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

 Demo and Code

Exploring UI Animation #2

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

 Demo and Code

Exploring UI Animation #3

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

 Demo and Code

Ecommerce Slider v2.0

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

 Demo and Code

Clean Slider With Curved Background

HTML, CSS and JavaScript clean slider with curved background. Made by Ruslan Pivovarov.

Demo and Code

Exploring UI animation #1

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

 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.

 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.

 Demo and Code

Slider

Slider using CSS3 property clip. Made by Pedro Castro.

 Demo and Code

CSS Slider

Responsive CSS slider. Made by geekwen.

 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.

 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.

 Demo and Code

Dot Slider

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

 Demo and Code

Prism Effect Slider

Prism effect slider with HTML, CSS and JavaScript. Made by victor.

 Demo and Code

Sliding Background Gallery

Sliding background gallery with HTML, CSS and JavaScript. Made by Ron Gierlach.

 Demo and Code

Dual Slider

HTML, CSS and JavaScript slider solution. Made by Jürgen Genser.

 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.

Demo and Code

Tiny Circle Slider

Tiny circle customized slider. Made by Bram de Haan.

 Demo and Code

Responsive GTA V Slider

Responsive GTA V slider with HTML, CSS and JavaScript. Made by Eduard Mayer.

Demo and Code

A Cubey Slider

It’s like a slider but it rotates cubeishly for reasons unknown. Made by Eric Brewer.

 Demo and Code

CSS Hover Slider

Pure CSS hover slider. Made by Hugo DarbyBrown.

 Demo and Code

SIMPLE SLIDERS

Image Overlay Slider

Image overlay slider with HTML, CSS and vanilla JavaScript. Made by Yugam.

 Demo and Code

Pure CSS Featured Image Slider

HTML and CSS featured image slider. Made by Joshua Hibbert.

 Demo and Code

CSS SLIDER

CSS SLIDER

Simple pure CSS slider made with <input type="radio">. Made with HTML/CSS by MAHESH AMBURE.

 Demo and Code

Feature Slider

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

 Demo and Code

Animated Cube Slider

CSS only. Made by Alberto Hartzet.

 Demo and Code

Simple Image Slider

Features: – automatic slideshow – pause on hover – dynamic slide counter – show/hide controls on hover. Made by André Cortellini.

 Demo and Code

Multi Axis Image Slider

Multi axis image slider with HTML, CSS and JavaScript. Made by Burak Can.

 Demo and Code

3D Cube Slider. Pure CSS

Cube slider, a small experiment with HTML5/CSS3 3d transforms. Made by Ilya K.

 Demo and Code