96 CSS Sliders
May 24, 2020 Collection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple, etc. Update of April 2019 collection. 8 new items.
Author A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.
Demo Image: Information Card Slider
HTML, CSS and JavaScript information card slider.Made by Andy TranNovember 23, 2015
Demo Image: Elastic Slider
Photo slider working on desktop and mobile browsers.Made by TaronSeptember 29, 2014
Author A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.
Author A before and after slider with only html and css.
Author 
Demo Image: Before After Image Slider (Vanilla JS)
Vanilla JS, minimal, nice to look.Made by HuwJuly 3, 2017
Author A "split-screen" slider element with JavaScript.
Demo Image: 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 RoblewskyApril 17, 2017
Demo Image: HTML5 Before & After Comparison Slider
Uses customised range input for slider.Made by Dudley StoreyOctober 14, 2016
Demo Image: Responsive Image Comparison Slider
Responsive image comparison slider with HTML, CSS and JavaScript.Made by Ege GörgülüAugust 3, 2016
Demo Image: HTML5 Video Before-and-After Comparison Slider
HTML5, CSS3 and JavaScript video before-and-after comparison slider.Made by Dudley StoreyApril 24, 2016
Demo Image: Image Comparison Slider
A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.Made by CodyHouseSeptember 15, 2014
About a code Pure CSS ECommerce SliderCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
About the code Pure CSS SliderSimple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author Nice transition effect for fullscreen slider.
Made with Horizontal parallax sliding slider with Swiper.js.
Author Responsive smooth 3D perspective slider on mouse move.
Demo Image: Fullscreen Hero Image Slider
Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript.Made by Tobias BoglioloJune 25, 2017
Demo Image: 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 ScaffMay 11, 2017
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 TaylorJannuary 22, 2017
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 PivovarovOctober 8, 2016
Demo Image: Fancy Slider
Features:
Demo Image: Gray & White - Skewed Slider With Scrolling
This skewed slider with scrolling based on pure JS and CSS (without libraries).Made by Victor BelozyorovSeptember 3, 2016
Demo Image: Pokemon Slider
A slider animation with Pokemon design.Made by Pham MikunAugust 18, 2016
Demo Image: Slider With Half-Collored Angled Text
HTML, CSS and JavaScritp slider with complex animation and half-collored angled text.Made by Ruslan PivovarovJuly 13, 2016
Demo Image: Slider Parallax Effect
Slider parallax effect with HTML, CSS and JavaScript.Made by Manuel MadeiraJune 28, 2016
Demo Image: Slider With Ripple Effect
HTML, CSS and JavaScript slider with ripple effect.Made by Pedro CastroMay 21, 2016
Demo Image: Clip-Path Revealing Slider
Clip-Path revealing slider with HTML, CSS and JavaScript.Made by Nikolay TalanovMay 16, 2016
Demo Image: Preview Slider
GSAP + Slick slider with preview of previous/next slides.Made by Karlo VidekApril 27, 2016
Demo Image: Full Page Slider
HTML, CSS and JavaScript full page slider.Made by Joseph MartucciFebruary 28, 2016
Demo Image: Full Slider Prototype
Full slider prototype with HTML, CSS and JavaScript.Made by Gluber SampaioJanuary 6, 2016
Demo Image: Greensock Animated Slideshow
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.Made by ArdenDecember 12, 2015
Demo Image: Linear Slider With SplitText Effect
Linear slider with SplitText effect.Made by ArdenDecember 5, 2015
Demo Image: Full-Screen Slider ( GSAP Timeline ) #1
Full-Screen slider (GSAP Timeline) #1 with HTML, CSS and JavaScript.Made by Diaco M.LotfollahiNovember 23, 2015
Demo Image: Pure CSS Slider With Custom Effects
HTML and CSS slider with custom effects.Made by Nikolay TalanovNovember 12, 2015
Demo Image: Fullscreen Drag-Slider With Parallax
Fullscreen drag-slider with parallax with HTML, CSS and JavaScript.Made by Nikolay TalanovNovember 12, 2015
Demo Image: Actual Rotating Slider
Proof of concept rotating slider. Uses clip-path and lots of math.Made by Tyler JohnsonApril 16, 2015
Demo Image: Simple Responsive Fullscreen Slider
A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!Made by JosephAugust 19, 2014
AuthorCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About a code Pure CSS SliderCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About a code Smallest Slider Ever Without JSCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code Images Opacity SliderImages opacity slider in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code Stacked Flexible Slides LayoutThis 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: -
AuthorAnimated responsive slider in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: animate.css
About the code Slider With Masked TextCSS only slider with masked text.
Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code Oceanic Overlays Slider Image and content slider with parallax effect.
About the code CSS SliderCSS only slide gallery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
AuthorPure HTML/CSS slider with circular SVG progress bar.
Compatible browsers: Chrome, Edge (partial), Firefox (partial), Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Author An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.
Author A simple Flexbox image slider/carousel made with vanilla JavaScript.
Author 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.
Author Cool animates slider with JS.
Author This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.
Demo Image: 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
Demo Image: GSAP Slider
Simple GSAP slider with some subtle tween animations.Made by Goran VrbanJune 9, 2017
Demo Image: Slider UI
Slider UI with HTML, CSS and JavaScript.Made by Mergim UjkaniJune 6, 2017
Demo Image: Slider GSAP
Slider GSAP virsion 2.Made by Em AnMay 4, 2017
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 ScaffJanuary 3, 2017
Demo Image: Slider Animation Effect
Leveraged CSS border-image & clip-path to create a slider animation effect.Made by Emily HaymanDecember 31, 2016
Demo Image: Flexbox Slider
Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.Made by RobertNovember 28, 2016
Demo Image: Canvas Slider
HTML, CSS canvas slider.Made by NvagelisOctober 29, 2016
Demo Image: CSS Only Cupcake Slider
HTML and CSS cupcake slider with sprinkles!Made by Jamie CoulterOctober 14, 2016
Demo Image: Exploring UI Animation #3
Exploring UI animation #3 with HTML, CSS and JavaScript.Made by mario s maselliOctober 12, 2016
Demo Image: Exploring UI Animation #2
Exploring UI animation #2 with HTML, CSS and JavaScript.Made by mario s maselliSeptember 22, 2016
Demo Image: Exploring UI Animation #3
Exploring UI animation #3 with HTML, CSS and JavaScript.Made by mario s maselliSeptember 22, 2016
Demo Image: Ecommerce Slider v2.0
Ecommerce Slider v2.0 with HTML, CSS and JavaScript.Made by Pedro CastroSeptember 17, 2016
Demo Image: Clean Slider With Curved Background
HTML, CSS and JavaScript clean slider with curved background.Made by Ruslan PivovarovSeptember 13, 2016
Demo Image: Exploring UI animation #1
Exploring UI animation #1 with HTML, CSS and JavaScript.Made by mario s maselliSeptember 8, 2016
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 KsesoAugust 15, 2016
Demo Image: Double Exposure Carousel Slider
Double exposure is photographic technique that combines 2 different images into a single image.Made by Misaki NakanoAugust 3, 2016
Demo Image: Slider
Slider using CSS3 property clip.Made by Pedro CastroMay 1, 2016
Demo Image: CSS Slider
Responsive CSS slider.Made by geekwenApril 19, 2016
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 HarryApril 5, 2016
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 AkbarMarch 31, 2016
Demo Image: Dot Slider
Dot slider with HTML, CSS and JavaScript.Made by Derek NguyenMarch 16, 2016
Demo Image: Prism Effect Slider
Prism effect slider with HTML, CSS and JavaScript.Made by victorMarch 12, 2016
Demo Image: Sliding Background Gallery
Sliding background gallery with HTML, CSS and JavaScript.Made by Ron GierlachNovember 30, 2015
Demo Image: Dual Slider
HTML, CSS and JavaScript slider solution.Made by Jürgen GenserSeptember 30, 2015
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 LunnSeptember 15, 2015
Demo Image: Tiny Circle Slider
Tiny circle customized slider.Made by Bram de HaanAugust 11, 2015
Demo Image: Responsive GTA V Slider
Responsive GTA V slider with HTML, CSS and JavaScript.Made by Eduard MayerJanuary 24, 2014
Demo Image: A Cubey Slider
It's like a slider but it rotates cubeishly for reasons unknown.Made by Eric BrewerDecember 4, 2013
Demo Image: CSS Hover Slider
Pure CSS hover slider.Made by Hugo DarbyBrownAugust 28, 2013
AuthorCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
About a code Checkbox HackNo checkbox at all. But classic href='#..' plus :target combo.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
About a code CSS Only SliderCompatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Demo Image: Image Overlay Slider
Image overlay slider with HTML, CSS and vanilla JavaScript.Made by YugamJune 7, 2017
Demo Image: Pure CSS Featured Image Slider
HTML and CSS featured image slider.Made by Joshua HibbertJune 16, 2016
Author Simple pure CSS slider made with <input type="radio">
Demo Image: Feature Slider
Feature slider with HTML, CSS and JavaScript.Made by Andy LorimerOctober 23, 2015
Demo Image: Animated Cube Slider
CSS only.Made by Alberto HartzetMay 6, 2015
Demo Image: Simple Image Slider
Features: - automatic slideshow - pause on hover - dynamic slide counter - show/hide controls on hover.Made by André CortelliniAugust 14, 2014
Demo Image: Multi Axis Image Slider
Multi axis image slider with HTML, CSS and JavaScript.Made by Burak CanJuly 22, 2013
Demo Image: 3D Cube Slider. Pure CSS
Cube slider, a small experiment with HTML5/CSS3 3d transforms.Made by Ilya K.June 26, 2013
AuthorA 100% pure CSS image slider with previous/next buttons and image transitions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Free Blogger templatest, Free Blogger templates Minimalist, Free blogger templates responsive, Layouts blogger, Simple free blog template, Blog template WordPress, Goyabi templates, Nawigacja na stronie, Free Blogger templates, Free Blogger templates Minimalist, Btemplates, Free blogger templates responsive, Simple free blog template, Blog template WordPress, Blogger template responsive free, Blogger templates,s Free Blogger templates Free Blogger templates Minimalist Layouts blogger Free blogger templates responsive Btemplates Blogger portfolio template Blog template WordPress Free themes blogspot Theme Blogger Premium Gratis Download Parhlo Premium/Magazine Blogger Template Google Infinite AMP Responsive Blogger Template | Blogspot Infinite AMP Sarkari Result WordPress Theme Free Download Amalia • v1.0 - Responsive •Blogger Template Amalie • Blogspot TemplateCodeify v1.0 - Personal Blogger Template new blogger templates, best blogger templatesLuvblog - Responsive HTML5 Blogger Template Twitter Bootstrap 3.0 100% Responsive DesignCream - Responsive News & Magazine Blogger Template Cream Magazine | ThemebeezSeo Mag - Responsive Blogger TemplateBest - SEO Friendly Blogger Templates • Top Best Free • New TemplatesWaverly - Personal Responsive Blogger Template250+ Best Free Responsive Blogger Templates PackNewsify v1.0 - News NEWSIFY BLOGGER THEME FEATURES Magazine Blogger Templateresponsive blogger templatesprofessional blogger templates freefree customizable blogger templatesfree blogger templates simple blogger templates freefree html blog templatesclean blogger templatespremium responsive blogger templates
Comments
Post a Comment