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!

An awesome vertical slide transition when dragging. The picture gets fragmented and splits depending on the direction of dragging.

A neat yet cool glitchy slideshow transition using JS and CSS.

A little slice transition slider using a simple add class deal.

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

Leveraged CSS border-image & clip-path to create a slider animation effect.

A cool dual view slider for fullscreen websites.

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.

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.

You can use this before and after comparison slider on your HTML5 videos.

Exploring a parallel up & down slider concept inspired by https://dribbble.com/logancee

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.

A parallax JS slider concept inspired by @ErnestAsanov and by the awesome team at Tubik Studio.

I like cupcakes… and sliders.

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

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.

A responsive parallax drag slider with blending mode letters and vibrant backgrounds.

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.

Based on Dribbble shot https://dribbble.com/shots/2936160-Opus-Animation this fluid parallax slider will look great in your projects.

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.

A lovely eCommerce JS slider that uses images from Unsplash.

This skewed slider with scrolling based on pure JS and CSS without libraries.

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.

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.

A neat JS slider using the CSS property Clip.

A funny and simple JS dot slider.

See the Pen Dot Slider by d4rek (@d4rek) on CodePen.

An awesome JS slider with ripple effect. This resource was inspired from https://dribbble.com/shots/2705517-boldybae

A clip-path revealing slider using Javascript and CSS.

This HTML5 before and after comparison uses customised range input for slider.

This JS slider works really well for full page websites or apps.

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.

A fullscreen drag-slider with parallax effect and sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine.

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

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

A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!