CSS Sliders

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

Card Sliders

Demo Image: Information Card Slider

Information Card Slider

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

download demo and code

 

Demo Image: Elastic Slider

Elastic Slider

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

download demo and code

Comparison Sliders

Demo Image: Before After Image Slider (Vanilla JS)

Before After Image Slider (Vanilla JS)

Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2017

download demo and code

Demo Image: Before & After Slider Gallery With SVG Masks

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

download demo and code

Demo Image: HTML5 Before & After Comparison Slider

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

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

download demo and code

Demo Image: HTML5 Video Before-and-After Comparison Slider

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

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

download demo and code

read more
http://freefrontend.com/css-sliders/