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
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
Discussion about this post