110+ Perfect CSS Sliders (Free Code + Demos)

A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.

A simple and clean image comparison slider, fully responsive and touch ready made with css and jquery.

I wanted to try and make a before and after slider with only html and css. Please let me know your thoughts!

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 :)

Demo to accompany Adi Purdila’s tutorial How to Create a Split-Screen Slider With JavaScript.

Simple slider based on radio inputs. 100% pure html + css. Works also with arrow keys.

Responsive (sort of?). Uses this technique for smooth transitions on mouse move - https://codepen.io/rachsmith/post/animation-tip-lerp

Not recommended for production use. But it seemed like a fun idea to see how far I could take a form with radio inputs.

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.

An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.

A simple Flexbox image slider/carousel made with vanilla JavaScript.

This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider. CHANGELOG Added will-change property to improve performance.

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

Read More

no checkbox at all :D but classic href='#..' plus :target combo photo by https://unsplash.com/@szvmanski

A 100% pure CSS image slider with previous/next buttons and image transitions. Updated with simplified HTML and CSS, better image transitions and resized images.

Photo slider working on desktop and mobile browsers.

I couldn't find a before after image slider that suited my purposes: - Vanilla JS - Minimal - Nice to look at - Like it if it's handy :)

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.

Uses customised range input for slider. More details on my blog

Requested in response to my earlier comparison sliders. Full article.

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.

Simple slider in a minimal style to show off images. part of the image pops out on each slide. Has some lag issues due to the blur and hi res images.

Doesn't work in IE. 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...

Read More

This Skewed Slider with Scrolling based on Pure JS and CSS (without libraries).

A slider inspired by a Dribbble created by Jardson Almeida (https://dribbble.com/shots/2518516-Nike-Promotion-Ads-Parallax-Effect).

This resource was inspired by the talented Tokito https://dribbble.com/shots/2705517-boldybae

GSAP + Slick slider slider with preview of previous/next slides

Hi, this slide demo was based on HelloThierry.com home slider, originally created by @jcsuzanne. With this demo I'm trying to achieve the same interactions results and improve my JS skills. Have fun!

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. This is work in progress, currently working on how to best pevent the slidein animations from firing when users click the next/prev button repeatedly. See: http://greensock.com/forums/topic/13282-m...

Read More

Full-Screen Slider ( GSAP Timeline ) #2: http://codepen.io/MAW/pen/yYradO/

Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine. Source of inspiration - https://stupid-studio.com/ (their js is minified, so all code is mine, except some parts of svg, like viewBox/minHeight).

Proof of concept rotating slider. Uses clip-path and lots of math.

a simple fullscreen css & jQuery slider using translateX and translate3d smoothness! If this can be further simplified suggestions are most welcome.

Exploring some slider transitions. I am using Swiper slider with parallax option enabled. Playing with CSS filters mostly here.

Simple GSAP slider with some subtle tween animations

A little slicey transition slider using a simple add class deal. Wanted to see if I could get this interaction butter smooth, with just css transitions, as oppose to a animation lib like Velocity or GSAP. Have to smooth out the timings a bit and decide on the best approach for mobile (j...

Read More

Leveraged CSS border-image & clip-path to create a slider animation effect. Inspiration from: https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation

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

I like cupcakes....and sliders

This time I'm doing a slider concept designed by the guys at Kreativa Studio. I really loved the dribble post, so I give it a try. Hope you guys like it. https://dribbble.com/KreativaStudio

Exploring a slider concept designed by @Logancee https://dribbble.com/logancee

Exploring a slider concept designed by @Tokito https://dribbble.com/tokito (Chrome and Safari only)

Imagens by Unsplash

Exploring a slider concept designed by @ErnestAsanov and by the awesome team at Tubik Studio.

Enjoy the power of Css: Up&down each middle image and paginated slider with lightbox

Double exposure is photographic technique that combines 2 different images into a single image. Then I use this technique with canvas blend modes.

Original javascript Tiny Circle Slider by Maarten Baijs Reconstructed from original design by Yadwinder Yadwinder Singh yadwindersingh.com html5coder.net earlier version without background-image this version with (encoded) SVG background-images Standalone SVG as a Github Gist

Responsive CSS slider

I read this article and I just had to. This is a simple slider experiment displaying words with beautiful meanings which cannot be directly translated. Focus: elegant typography and simple yet alluring transitions.

The animation idea is to change the value of CSS clip path, thus make a masking effect. Works great on chrome and opera. There's some issue with Safari and Firefox doesn't support CSS Clip Path yet.

Navigation bar. See more at https://dribbble.com/shots/2581199-Dot-navigation

Prism Effect Slider Autor EndeX

a slider solution for an upcoming website.

Read the tutorial. 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. About Sequence.js | Sequence.js Theme Store | Fork Sequence.js on GitHub Follow @IanL...

Read More

Original javascript Tiny Circle Slider by Maarten Baijs Reconstructed from original design by Yadwinder Yadwinder Singh yadwindersingh.com html5coder.net earlier version without background-image this version with (encoded) SVG background-images Standalone SVG as a Github Gist

It's like a slider but it rotates cubeishly for reasons unknown. (webkit)

CSS only

A simple JQuery image slider! Features: - Automatic slideshow - Pause on hover - Dynamic slide counter - Show/Hide controls on hover

Cube slider, a small experiment with HTML5/CSS3 3d transforms.

Idea: https://twitter.com/Real_CSS_Tricks/status/790218623113580544/photo/1

Vertical slideshow in split screen

A small experiment which quickly turned into something more.

3D slider html css3

This is a Slider that does not use any JavaScript! Yes, it is possible! Just need to modify the animations % based on your preferences and the container width based on the number of slides. By default the whole loop of animation is 30 seconds, also here you can speed it up if you like.

Once again using the input:checked technique to trigger a horizontal sliding effect. No JS required.