Slider examples made with pure JS & CSS, jQuery or other Javascript libraries can be used in many creative projects. From portfolio websites to fashion websites to online shops, they can enhance the user experience by displaying information in new and interesting ways.
CodePen is a wonderful resource place where not only can you find inspiring ideas for buttons, text effects, etc. but also the code on how to implement them. In this article I put together some of the best CSS & JS sliders that CodePen has to offer. Enjoy!
Slider Transition (City Slider)
An awesome vertical slide transition when dragging. The picture gets fragmented and splits depending on the direction of dragging.
See the Pen Slider Transition (City Slider) by Manoylov (@Manoylov) on CodePen.
Glitch Slideshow Fullscreen
A neat yet cool glitchy slideshow transition using JS and CSS.
See the Pen Glitch Slideshow Fullscreen by amy_ash (@amy_ash) on CodePen.
JS Slice Slider
A little slice transition slider using a simple add class deal.
See the Pen JS Slice Slider by StephenScaff (@StephenScaff) on CodePen.
Javascript Slider Animation Effect
Leveraged CSS border-image & clip-path to create a slider animation effect.
See the Pen Javascript Slider Animation Effect by eehayman (@eehayman) on CodePen.
View Slide Dual Using JS
A cool dual view slider for fullscreen websites.
See the Pen View Slide Dual Using JS by romswellparian (@romswellparian) on CodePen.
Exploring UI Animation #4
This time I'm doing a slider concept designed by the guys at Kreativa Studio. I really loved the Dribbble post, so I give it a try. Hope you guys like it.
See the Pen Exploring UI Animation #4 by mariosmaselli (@mariosmaselli) on CodePen.
Flexbox Slider
Little slider built with Flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
See the Pen Flexbox Slider by rendro (@rendro) on CodePen.
HTML5 Video Before-and-After Comparison Slider
You can use this before and after comparison slider on your HTML5 videos.
See the Pen HTML5 Video Before-and-After Comparison Slider by dudleystorey (@dudleystorey) on CodePen.
Exploring UI Animation #2
Exploring a parallel up & down slider concept inspired by https://dribbble.com/logancee
See the Pen Exploring UI Animation #2 by mariosmaselli (@mariosmaselli) on CodePen.
Image Comparison Slider
A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
See the Pen Image Comparison Slider by codyhouse (@codyhouse) on CodePen.
Exploring UI Animation #1
A parallax JS slider concept inspired by @ErnestAsanov and by the awesome team at Tubik Studio.
See the Pen Exploring UI Animation #1 by mariosmaselli (@mariosmaselli) on CodePen.
CSS Only Cupcake Slider with Sprinkles!
I like cupcakes… and sliders.
See the Pen CSS Only Cupcake Slider with Sprinkles! by jcoulterdesign (@jcoulterdesign) on CodePen.
Exploring UI Animation #3
Exploring a slider concept inspired by https://dribbble.com/tokito (Chrome and Safari only).
See the Pen Exploring UI Animation #3 by mariosmaselli (@mariosmaselli) on CodePen.
Popout JS Slider
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.
See the Pen Popout JS Slider by nathantaylor (@nathantaylor) on CodePen.
Responsive Parallax Drag-slider With Transparent Letters
A responsive parallax drag slider with blending mode letters and vibrant backgrounds.
See the Pen Responsive Parallax Drag-slider With Transparent Letters by mrspok407 (@mrspok407) on CodePen.
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.
See the Pen Untranslatable by woodwork (@woodwork) on CodePen.
Clean Slider With Curved Background
Based on Dribbble shot https://dribbble.com/shots/2936160-Opus-Animation this fluid parallax slider will look great in your projects.
See the Pen Clean Slider With Curved Background by mrspok407 (@mrspok407) on CodePen.
Fancy JS Slider
A fancy slider that uses CSS and JS and was inspired by Dribbble shot https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation
See the Pen Fancy JS Slider by suez (@suez) on CodePen.
Ecommerce Slider v2.1
A lovely eCommerce JS slider that uses images from Unsplash.
See the Pen Ecommerce Slider v2.1 by pedro-castro (@pedro-castro) on CodePen.
Gray & White – Skewed Slider With Scrolling
This skewed slider with scrolling based on pure JS and CSS without libraries.
See the Pen Gray & White – Skewed Slider With Scrolling by WispProxy (@WispProxy) on CodePen.
Pokemon Slider
A JS slider animation with Pokemon design base on this idea: https://www.behance.net/gallery/38203579/MrBara-Fashion-Website
See the Pen Pokemon Slider by mikun (@mikun) on CodePen.
Slider Parallax Effect
A parallax slider effect inspired by a Dribbble shot created by Jardson Almeida (https://dribbble.com/shots/2518516-Nike-Promotion-Ads-Parallax-Effect).
See the Pen Slider Parallax Effect by mmadeira (@mmadeira) on CodePen.
Slider using property Clip
A neat JS slider using the CSS property Clip.
See the Pen Slider using property Clip by pedro-castro (@pedro-castro) on CodePen.
Dot Slider
A funny and simple JS dot slider.
See the Pen Dot Slider by d4rek (@d4rek) on CodePen.
Slider with Ripple Effect v1.1
An awesome JS slider with ripple effect. This resource was inspired from https://dribbble.com/shots/2705517-boldybae
See the Pen Slider with Ripple Effect v1.1 by pedro-castro (@pedro-castro) on CodePen.
Clip-Path Revealing Slider
A clip-path revealing slider using Javascript and CSS.
See the Pen Clip-Path Revealing Slider by suez (@suez) on CodePen.
HTML5 Before & After Comparison Slider
This HTML5 before and after comparison uses customised range input for slider.
See the Pen HTML5 Before & After Comparison Slider by dudleystorey (@dudleystorey) on CodePen.
Full Page Javascript Slider
This JS slider works really well for full page websites or apps.
See the Pen Full Page Javascript Slider by jjmartucci (@jjmartucci) on CodePen.
Full Slider Prototype
Hi, this slide demo was based on hellothierry.com home slider, originally created by @jcsuzanne.
See the Pen Full Slider Prototype by glaubersampaio (@glaubersampaio) on CodePen.
Fullscreen Drag-slider With Parallax
A fullscreen drag-slider with parallax effect and sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine.
See the Pen Fullscreen Drag-slider With Parallax by suez (@suez) on CodePen.
Actual Rotating Slider
Proof of concept rotating slider. Uses clip-path and lots of math.
See the Pen Actual Rotating Slider by tylernj42 (@tylernj42) on CodePen.
Simple Responsive Fullscreen Slider
A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
See the Pen Simple Responsive Fullscreen Slider by jibbon (@jibbon) on CodePen.
