FreeFrontend

58 CSS Sliders

January 27, 2017 | 28 Minute Read

Collection of HTML and CSS sliders: card, comparison, fullscreen, responsive and simple. Demo and download code (*zip).

Card Sliders

Demo Image: Information Card Slider
Information Card Slider (demo image)

Information Card Slider

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

download demo and code

See the Pen Information Card Slider by Andy Tran (@andytran) on CodePen.

Demo Image: Elastic Slider
Elastic Slider (demo image)

Elastic Slider

Photo slider working on desktop and mobile browsers.
Made by Taron
September 29, 2014

download demo and code

See the Pen Elastic Slider by Taron (@Taron) on CodePen.

Comparison Sliders

Demo Image: HTML5 Before & After Comparison Slider
HTML5 Before & After Comparison Slider (demo image)

HTML5 Before & After Comparison Slider

Uses customised range input for slider.
Made by Dudley Storey
October 14, 2016

download demo and code
Demo Image: Responsive Image Comparison Slider
Responsive Image Comparison Slider (demo image)

Responsive Image Comparison Slider

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

download demo and code

See the Pen Responsive Image Comparison Slider by Ege Görgülü (@bamf) on CodePen.

Demo Image: HTML5 Video Before-and-After Comparison Slider
HTML5 Video Before-and-After Comparison Slider (demo image)

HTML5 Video Before-and-After Comparison Slider

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

download demo and code
Demo Image: Image Comparison Slider
Image Comparison Slider (demo image)

Image Comparison Slider

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

download demo and code

See the Pen Image Comparison Slider by CodyHouse (@codyhouse) on CodePen.

Fullscreen Sliders

Demo Image: Popout Slider
Popout Slider (demo image)

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

download demo and code

See the Pen Popout Slider by Nathan Taylor (@nathantaylor) on CodePen.

Demo Image: Responsive Parallax Drag-slider With Transparent Letters
Responsive Parallax Drag-slider With Transparent Letters (demo image)

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

download demo and code
Demo Image: Fancy Slider
Fancy Slider (demo image)

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

download demo and code

See the Pen Fancy Slider by Nikolay Talanov (@suez) on CodePen.

Demo Image: Gray & White - Skewed Slider With Scrolling
Gray & White - Skewed Slider With Scrolling (demo image)

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

download demo and code

See the Pen Gray & White - Skewed Slider with Scrolling by Victor Belozyorov (@WispProxy) on CodePen.

Demo Image: Pokemon Slider
Pokemon Slider (demo image)

Pokemon Slider

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

download demo and code

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

Demo Image: Slider With Half-Collored Angled Text
Slider With Half-Collored Angled Text (demo image)

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

download demo and code
Demo Image: Slider Parallax Effect
Slider Parallax Effect (demo image)

Slider Parallax Effect

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

download demo and code

See the Pen Slider Parallax Effect by Manuel Madeira (@mmadeira) on CodePen.

Demo Image: Slider With Ripple Effect
Slider With Ripple Effect (demo image)

Slider With Ripple Effect

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

download demo and code

See the Pen Slider with Ripple Effect v1.0 by Pedro Castro (@pedro-castro) on CodePen.

Demo Image: Clip-Path Revealing Slider
Clip-Path Revealing Slider (demo image)

Clip-Path Revealing Slider

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

download demo and code

See the Pen Clip-Path Revealing Slider by Nikolay Talanov (@suez) on CodePen.

Demo Image: Preview Slider
Preview Slider (demo image)

Preview Slider

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

download demo and code

See the Pen Preview slider by Karlo Videk (@karlovidek) on CodePen.

Demo Image: Full Page Slider
Full Page Slider (demo image)

Full Page Slider

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

download demo and code

See the Pen Full Page Slider by Joseph Martucci (@jjmartucci) on CodePen.

Demo Image: Full Slider Prototype
Full Slider Prototype (demo image)

Full Slider Prototype

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

download demo and code

See the Pen Full Slider Prototype by Gluber Sampaio (@glaubersampaio) on CodePen.

Demo Image: Greensock Animated Slideshow
Greensock Animated Slideshow (demo image)

Greensock Animated Slideshow

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

download demo and code
Demo Image: Linear Slider With SplitText Effect
Linear Slider With SplitText Effect (demo image)

Linear Slider With SplitText Effect

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

download demo and code
Demo Image: Full-Screen Slider ( GSAP Timeline ) #1
Full-Screen Slider ( GSAP Timeline ) #1 (demo image)

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

download demo and code

See the Pen Full-Screen Slider ( GSAP Timeline ) #1 by Diaco M.Lotfollahi (@MAW) on CodePen.

Demo Image: Pure CSS Slider With Custom Effects
Pure CSS Slider With Custom Effects (demo image)

Pure CSS Slider With Custom Effects

HTML and CSS slider with custom effects.
Made by Nikolay Talanov
November 12, 2015

download demo and code

See the Pen Pure css slider with custom effects by Nikolay Talanov (@suez) on CodePen.

Demo Image: Fullscreen Drag-Slider With Parallax
Fullscreen Drag-Slider With Parallax (demo image)

Fullscreen Drag-Slider With Parallax

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

download demo and code

See the Pen Fullscreen drag-slider with parallax by Nikolay Talanov (@suez) on CodePen.

Demo Image: Actual Rotating Slider
Actual Rotating Slider (demo image)

Actual Rotating Slider

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

download demo and code

See the Pen Actual Rotating Slider by Tyler Johnson (@tylernj42) on CodePen.

Demo Image: Simple Responsive Fullscreen Slider
Simple Responsive Fullscreen Slider (demo image)

Simple Responsive Fullscreen Slider

A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph
August 19, 2014

download demo and code

Responsive Sliders

Demo Image: Slice Slider
Slice Slider (demo image)

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

download demo and code

See the Pen Slice Slider by Stephen Scaff (@StephenScaff) on CodePen.

Demo Image: Slider Animation Effect
Slider Animation Effect (demo image)

Slider Animation Effect

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

download demo and code

See the Pen Slider Animation Effect by Emily Hayman (@eehayman) on CodePen.

Demo Image: Flexbox Slider
Flexbox Slider (demo image)

Flexbox Slider

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

download demo and code

See the Pen Flexbox slider by Robert (@rendro) on CodePen.

Demo Image: Canvas Slider
Canvas Slider (demo image)

Canvas Slider

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

download demo and code

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

Demo Image: 3D Smooth Slider
3D Smooth Slider (demo image)

3D Smooth Slider

HTML, CSS and JavaScript 3D smooth slider.
Made by Eduardo Allegrini
October 19, 2016

download demo and code

See the Pen 3D Smooth Carousel (Slider) by Eduardo Allegrini (@eduardoallegrini) on CodePen.

Demo Image: CSS Only Cupcake Slider
CSS Only Cupcake Slider (demo image)

CSS Only Cupcake Slider

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

download demo and code
Demo Image: Exploring UI Animation #3
Exploring UI Animation #3 (demo image)

Exploring UI Animation #3

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

download demo and code

See the Pen Exploring UI Animation #4 by mario s maselli (@mariosmaselli) on CodePen.

Demo Image: Exploring UI Animation #2
Exploring UI Animation #2 (demo image)

Exploring UI Animation #2

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

download demo and code

See the Pen Exploring UI Animation #2 by mario s maselli (@mariosmaselli) on CodePen.

Demo Image: Exploring UI Animation #3
Exploring UI Animation #3 (demo image)

Exploring UI Animation #3

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

download demo and code

See the Pen Exploring UI Animation #3 by mario s maselli (@mariosmaselli) on CodePen.

Demo Image: Ecommerce Slider v2.0
Ecommerce Slider v2.0 (demo image)

Ecommerce Slider v2.0

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

download demo and code

See the Pen Ecommerce Slider v2.0 by Pedro Castro (@pedro-castro) on CodePen.

Demo Image: Clean Slider With Curved Background
Clean Slider With Curved Background (demo image)

Clean Slider With Curved Background

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

download demo and code

See the Pen Clean Slider With Curved Background by Ruslan Pivovarov (@mrspok407) on CodePen.

Demo Image: Exploring UI animation #1
Exploring UI animation #1 (demo image)

Exploring UI animation #1

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

download demo and code

See the Pen Exploring UI Animation #1 by mario s maselli (@mariosmaselli) on CodePen.

Demo Image: Slicing Images Pure CSS And More
Slicing Images Pure CSS And More (demo image)

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

download demo and code

See the Pen slicing images pure Css and more by Kseso (@Kseso) on CodePen.

Demo Image: Double Exposure Carousel Slider
Double Exposure Carousel Slider (demo image)

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

download demo and code

See the Pen double exposure carousel slider by Misaki Nakano (@mnmxmx) on CodePen.

Demo Image: Slider
Slider (demo image)

Slider

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

download demo and code

See the Pen Slider using property Clip by Pedro Castro (@pedro-castro) on CodePen.

Demo Image: CSS Slider
CSS Slider (demo image)

CSS Slider

Responsive CSS slider.
Made by geekwen
April 19, 2016

download demo and code

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

Demo Image: Untranslatable
Untranslatable (demo image)

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

download demo and code

See the Pen Untranslatable by Joe Harry (@woodwork) on CodePen.

Demo Image: Image Slider With Masking Effect
Image Slider With Masking Effect (demo image)

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

download demo and code

See the Pen Image Slider with Masking Effect by Bhakti Al Akbar (@balapa) on CodePen.

Demo Image: Dot Slider
Dot Slider (demo image)

Dot Slider

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

download demo and code

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

Demo Image: Prism Effect Slider
Prism Effect Slider (demo image)

Prism Effect Slider

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

download demo and code

See the Pen Prism Effect Slider by victor (@vkanet) on CodePen.

Demo Image: Sliding Background Gallery
Sliding Background Gallery (demo image)

Sliding Background Gallery

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

download demo and code

See the Pen Sliding Background Gallery by Ron Gierlach (@youfoundron) on CodePen.

Demo Image: Dual Slider
Dual Slider (demo image)

Dual Slider

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

download demo and code

See the Pen Dual Slider by Jürgen Genser (@juergengenser) on CodePen.

Demo Image: Sequence.js - Mono
Sequence.js - Mono (demo image)

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

download demo and code

See the Pen Sequence.js - Mono by Ian Lunn (@IanLunn) on CodePen.

Demo Image: Tiny Circle Slider
Tiny Circle Slider (demo image)

Tiny Circle Slider

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

download demo and code

See the Pen Tiny Circle Slider - Customized by Bram de Haan (@atelierbram) on CodePen.

Demo Image: Responsive GTA V Slider
Responsive GTA V Slider (demo image)

Responsive GTA V Slider

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

download demo and code

See the Pen Responsive GTA V Slider by Eduard Mayer (@codewunder) on CodePen.

Demo Image: A Cubey Slider
A Cubey Slider (demo image)

A Cubey Slider

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

download demo and code

See the Pen A Cubey Slider (webkit) by Eric Brewer (@ebrewe) on CodePen.

Demo Image: CSS Hover Slider
CSS Hover Slider (demo image)

CSS Hover Slider

Pure CSS hover slider.
Made by Hugo DarbyBrown
August 28, 2013

download demo and code

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

Simple Sliders

Demo Image: Pure CSS Featured Image Slider
Pure CSS Featured Image Slider (demo image)

Pure CSS Featured Image Slider

HTML and CSS featured image slider.
Made by Joshua Hibbert
June 16, 2016

download demo and code

See the Pen Pure CSS Featured Image Slider by Joshua Hibbert (@joshnh) on CodePen.

Demo Image: Feature Slider
Feature Slider (demo image)

Feature Slider

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

download demo and code

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

Demo Image: Animated Cube Slider
Animated Cube Slider (demo image)

Animated Cube Slider

CSS only.
Made by Alberto Hartzet
May 6, 2015

download demo and code

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

Demo Image: Simple Image Slider
Simple Image Slider (demo image)

Simple Image Slider

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

download demo and code

See the Pen Simple Image Slider by André Cortellini (@AndreCortellini) on CodePen.

Demo Image: Multi Axis Image Slider
Multi Axis Image Slider (demo image)

Multi Axis Image Slider

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

download demo and code

See the Pen Multi axis image slider by Burak Can (@neoberg) on CodePen.

Demo Image: 3D Cube Slider. Pure CSS
3D Cube Slider. Pure CSS (demo image)

3D Cube Slider. Pure CSS

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

download demo and code

See the Pen 3D Cube slider. Pure CSS. by Ilya K. (@fornyhucker) on CodePen.