Collection of HTML and CSS Slider Code Examples: Card, Comparison, Fullscreen, and More

Browse a collection of free HTML and CSS slider code examples, including card, comparison, fullscreen, responsive, and simple sliders to enhance your website's interactivity.

Onboarding Screens

Onboarding Screens

Author:
Jeff Ham | January 10, 2016
Made with:
HTML/HamlCSS/SCSSJavaScript/CoffeeScript (jquery.js)

About a code

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

Image Comparison Slider

Image Comparison Slider

Author:
Mario Duarte | August 14, 2017
Made with:
HTMLCSS/SCSSJavaScript/Babel (jquery.js)

About a code

A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

Javascriptless Before/After Slider

Javascriptless Before/After Slider

Author:
Matthew Steele | July 19, 2017
Made with:
HTMLCSS/SCSS

About a code

A before and after slider with only html and css.

Before After 3 Layer Image Slider

Before After 3 Layer Image Slider

Author:
Huw Llewellyn | July 14, 2017
Made with:
HTMLCSSJavaScript

Split Screen UI

Split Screen UI

Author:
Envato Tuts+ | May 15, 2017
Made with:
HTMLCSSJavaScript

About a code

A "split-screen" slider element with JavaScript.

Pure CSS ECommerce Slider

Author:
Adam Kuhn | June 13, 2019
Made with:
HTML (Haml) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Pure CSS Slider

Author:
Kamil | July 11, 2018
Made with:
HTML / CSS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Slider Transition

Slider Transition

Author:
Inner DonalLogue | January 24, 2018
Made with:
HTML/PugCSS/SCSSJavaScript

About a code

Nice transition effect for fullscreen slider.

Horizontal Parallax Sliding Slider

Horizontal Parallax Sliding Slider

Author:
digistat | January 9, 2018
Made with:
HTMLCSS/SCSSJavaScript (swiper.js)

About a code

Horizontal parallax sliding slider with Swiper.js.

Smooth 3D Perspective Slider

Smooth 3D Perspective Slider

Author:
Alex Nozdriukhi | August 17, 2017
Made with:
HTML/PugCSSJavaScript/Babel

About a code

Responsive smooth 3D perspective slider on mouse move.

CSS Slider with Keyboard Controls

Author:
David Lewis | June 29, 2014
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Crack Climbing Carousel - CSS :has()

Author:
Josetxu | January 8, 2023
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Opera, Safari
Responsive:
yes
Dependencies:
-

Multi Direction Slider Gallery

Author:
Chris Neale | August 7, 2022
Made with:
HTML / CSS (SCSS)

About a code

Pure CSS multi direction slider gallery.

Compatible browsers:
Chrome, Edge, Opera, Safari
Responsive:
yes
Dependencies:
-

Responsive Faux 3D Content Scroller

Author:
Jhey | July 28, 2022
Made with:
HTML / CSS (PostCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

CSS-Only Image Carousel

Author:
osef. | August 7, 2021
Made with:
HTML / CSS (SCSS)

About a code

An image slider made using only HTML and (S)CSS. Includes navigation dots and arrows. You can change the amount of images to display by modifying one style sheet global variable.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Pure CSS Scroll-Snap Carousel

Author:
Jenning | March 7, 2021
Made with:
HTML (Pug) / CSS (Sass)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css

CSS Slider

Author:
Ivan Grozdic | July 1, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css

Pure CSS Slideshow

Author:
Charanjit Chana | April 23, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Pure CSS Slider

Author:
Jenning | December 9, 2019
Made with:
HTML (Pug) / CSS (Sass)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Smallest Slider Ever Without JS

Author:
Steffen | July 19, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Images Opacity Slider

Author:
GDW | March 25, 2019
Made with:
HTML / CSS

About a code

Images opacity slider in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Stacked Flexible Slides Layout

Author:
Kamil | February 12, 2019
Made with:
HTML / CSS

About a code

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.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Responsive Slider

Author:
Nicolas Caqueux | November 22, 2018
Made with:
HTML / CSS / JS

About a code

Animated responsive slider in HTML, CSS and JavaScript.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
animate.css

Slider With Masked Text

Author:
Ting Chen | June 9, 2018
Made with:
HTML / CSS (SCSS)

About a code

CSS only slider with masked text.

Compatible browsers:
Chrome, Edge (partial), Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Oceanic Overlays Slider

Oceanic Overlays Slider

Author:
Shaw | May 24, 2018
Made with:
HTML / CSS (SCSS)

About a code

Image and content slider with parallax effect.

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨