15 CSS Sliders

CSS sliders are Hand-picked free collections and developed using HTML, CSS and JavaScript.

3D Cube Carousel

3D Cube Carousel developed using HTML, jQuery, and SCSS. 4-sided carousel/slider in three, count ’em THREE, dimensions.

Developed by: Derek Wheelden – Created on February 4, 2014, Updated on February 4, 2014

Yahoo like Weather App CSS Sliders

Yahoo like Weather App Slider developed using HTML, jQuery, and CSS.

Developed by: Chris Coyier – Created on May 13, 2013, Updated on May 17, 2013

Pure CSS Image Slider

Pure CSS Featured Image Slider developed using HTML, jQuery, and CSS.

Developed by: Joshua Hibbert – Created on June 23, 2012, Updated on June 16, 2016

Flexslider with simple CSS animated layers

Flexslider slider with master sliders like animated layers like title, description, price tag, and category tag. pure CSS animations for slider layers. Flexslider developed using HTML, jQuery, CSS.

Developed by: Komeyl – Created on July 18, 2015, Updated on February 25, 2017

Responsive Image Slider

Responsive Image Slider developed using HTML, JS, and CSS. A basic responsive image slider featuring next/previous buttons with a bullet based sub-navigation created with a bit of jQuery.

Developed by: David Fitas – Created on January 5, 2016, Updated on November 20, 2016

jQuery Slider with Items

15 CSS Sliders 1
Demo image: jQuery Slider with Items

JQuery Slider with Items developed using Haml, SCSS.

Developed by: Gerta Xhepi – Created on March 17, 2016, Updated on August 3, 2016

Double exposure carousel slider

Double exposure carousel slider developed using HTML, Babel, and CSS. Double exposure is a photographic technique that combines 2 different images into a single image. Then I use this technique with canvas blend modes.

Developed by: Misaki Nakano – Created on June 29, 2016, Updated on August 6, 2017

Layered parallax with jQuery

Layered parallax developed using HTML, jQuery, Flickity, and CSS.

Developed by: Dave DeSandro – Created on July 9, 2016, Updated on July 11, 2016

Island parallax Flickity

Island parallax Flickity developed using HTML, JS, flickity, and CSS.

Developed by: Dave DeSandro – Created on July 12, 2016, Updated on July 12, 2016

Simple GSAP slider

Simple GSAP slider developed using HTML, jQuery, CSS. Simple GSAP slider with some subtle tween animations.

Developed by: Goran Vrban – Created on June 9, 2017, Updated on June 9, 2017

Vue card carousel

The Vue card carousel developed using SCSS, jQuery, Pug. A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style that translates the images. Values are hardcoded for demonstration but it could be made generic via props.

Developed by: Will – Created on August 27, 2018 – Updated on November 25, 2019

Split Slick Slideshow

Split Slick Slideshow developed using jquery, HTML, SCSS. Vertical slideshow in split-screen.

Developed by: Fabio Ottaviani – Created on March 24, 2017 – Updated on October 11, 2018

Slider transitions

Slider transitions developed using jQuery, HTML, CSS. Exploring some slider transitions Swiper slider with parallax option enabled. Playing with CSS filters mostly here.

Developed by: Mirko Zorić – Created on June 10, 2017 – Updated on June 12, 2017

React Slider with Hover Effect

React Slider with Hover Effect developed using Babel, react, SCSS. A slider/carousel built with React. The x and y coordinates of the current slide are set to CSS variables to create dynamic transition effects on mouseover.

Developed by: Ryan Mulligan – Created on August 3, 2019 – Updated on August 28, 2019

Distorted Gallery

Simple Distorted Gallery relying on CSS transitions, with configurable SCSS variables. React used because I don’t even remember how to write non-react code anymore. But js code is fairly straightforward and mostly just sets classes.

Developed by: Nikolay Talanov – Created on August 18, 2019 – Updated on August 18, 2019

Latest posts by W3TWEAKS (see all)


Leave a Reply

Your email address will not be published. Required fields are marked *