This article demonstrates how to create several CSS image sliders for your webpage. Included are code walkthroughs and other slider examples.
A CSS image slider is a crucial part of any website or app. Sliders allow you to compact graphical information in a fun interactive way. The majority of the time, sliders are helpful to websites because they can be used to showcase different products or other relevant content to the visitor.
- What Is an Image Slider in CSS?
- Creating an Image Slider With Bullet Points
- Creating an Automatic Image Slider
- Creating an Image Slider With Links
- Creating an Image Slider with Nav Buttons
- Other Examples
- See Also
An image slider is an animated HTML fragment used to display images, text, and videos as a slide show. The slider is typically made of frames that can be viewed independently. It is like a small viewport or screen that contains all the slides. Sometimes slides are on an automatic timer that changes to the next slide after some time. Other times there are controls that allow a user to adjust the content manually.

Let’s start by creating a basic image slider using only CSS. This slider will have bullet points to toggle between the three images.
First, we want to create the HTML outline. This outline includes <span>
, <img>
, and <a>
elements.
<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1440342359743-84fcb8c21f21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="slide" width="500" height="300" />
<img src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1141&q=80" class="slide" width="500" height="300" />
<img src="https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" class="slide" width="500" height="300" />
</div>
<div class="buttons">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
</div>
</div>
The second step is applying styles to the <a>
navigation links and setting the animation transition for each slide as it moves into view.
.slider {
width: 500px;
height: 300px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
border-radius: 10px;
}
.image-container {
width: 1500px;
background-color: pink;
height: 300px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target ~ .image-container {
left: 0px;
}
#slide-2:target ~ .image-container {
left: -500px;
}
#slide-3:target ~ .image-container {
left: -1000px;
}
.buttons {
position: relative;
top: -3rem;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: white;
box-shadow: 0px 0px 6px #00000087, inset 0px 0px 1px black;
margin: 10px;
}

Sometimes we want to create an image slider that doesn’t have controls. We can achieve this by using CSS @keyframe
animations to create a timer that controls each slide. The keyframes will use the background-position
property to move a single image from left to right.
To begin, we’ll create a single HTML div element.
<div class="simple"></div>
The next step is to add the CSS styles and the @keyframe
animations to animate the single-frame slider.
.simple {
width: 800px;
height: 350px;
background-color: #eeeeee;
margin: auto;
background: url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2400&q=80");
animation-name: slide;
animation-duration: 10s;
animation-direction: normal;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes slide {
0% {
background-position: 0 0;
}
16.66% {
background-position: 0 0;
}
33.32% {
background-position: -800px 0;
}
49.98% {
background-position: -800px 0;
}
66.64% {
background-position: -1600px 0;
}
83.30% {
background-position: -1600px 0;
}
100% {
background-position: 0 0;
}
}

Sometimes it is necessary to create a slider with links to jump to individual slides. The links can be made with <a>
elements (anchor links) to jump to the correct slide. The link elements are then styled up to create buttons with numbers.
The slides are boxes and use CSS flexbox
to create a row and overflow
to control how many boxes are visible.
For the transition effect between slides, use the CSS scroll-snap-type and then scroll-behavior with its value set to smooth
. The smooth value results in a smooth animation that jumps to the next slide whenever clicking any of the links.
Additionally, we can style up a scroll bar as an optional control and add the overscroll-behavior
property to make it swipeable.
Now let’s create the links and slides semantically.
<div class="slider">
<a href="#slide-1">1</a>
<a href="#slide-2">2</a>
<a href="#slide-3">3</a>
<a href="#slide-4">4</a>
<a href="#slide-5">5</a>
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
</div>
Next, we will need the buttons, positioning, slides, and scrollbar styles.
.slider {
width: 500px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #666;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 500px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
color: #1c87c9;
}
.slider > a {
color: black;
}
.slider > a:focus {
background: #eee;
}
body {
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #1c87c9, #ffcc00);
font-family: "Ropa Sans", sans-serif;
}

In this following code walkthrough, we can spice an image slider up with autoplay and navigation buttons. A cool thing about this example is the autoplay animation stops once a user interacts with the slider. When creating this example, we’ll rely on the scroll-snap-align
property and the ::after
and ::before
pseudo-elements. We’ll also use two SVGs embedded in the background-image: url(svg)
for the navigation arrows.
Let’s create the elements.
<section class="carousel" aria-label="Gallery">
<ol class="carousel__viewport">
<li id="carousel__slide1" tabindex="0" class="carousel__slide">
<div class="carousel__snapper">
<a href="#carousel__slide4" class="carousel__prev"></a>
<a href="#carousel__slide2" class="carousel__next"></a>
</div>
</li>
<li id="carousel__slide2" tabindex="0" class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide1" class="carousel__prev"></a>
<a href="#carousel__slide3" class="carousel__next"></a>
</li>
<li id="carousel__slide3" tabindex="0" class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide2" class="carousel__prev"></a>
<a href="#carousel__slide4" class="carousel__next"></a>
</li>
<li id="carousel__slide4" tabindex="0" class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide3" class="carousel__prev"></a>
<a href="#carousel__slide1" class="carousel__next"></a>
</li>
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
<li class="carousel__navigation-item">
<a href="#carousel__slide1" class="carousel__navigation-button"></a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide2" class="carousel__navigation-button"></a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide3" class="carousel__navigation-button"></a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide4" class="carousel__navigation-button"></a>
</li>
</ol>
</aside>
</section>
We must add the element’s styles to get the autoplay animation and navigation arrows working.
@keyframes tonext {
75% {
left: 0;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0;
}
}
@keyframes tostart {
75% {
left: 0;
}
95% {
left: -300%;
}
98% {
left: -300%;
}
99% {
left: 0;
}
}
@keyframes snap {
96% {
scroll-snap-align: center;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: center;
}
}
body {
max-width: 37.5rem;
margin: 1rem auto;
padding: 0 1.25rem;
font-family: "Lato", sans-serif;
}
* {
box-sizing: border-box;
scrollbar-color: transparent transparent; /* thumb and track color */
scrollbar-width: 0px;
}
*::-webkit-scrollbar {
width: 0;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}
* {
-ms-overflow-style: none;
}
ol,
li {
list-style: none;
margin: 0;
padding: 0;
}
.carousel {
position: relative;
padding-top: 56.25%;
filter: drop-shadow(0 0 10px #0003);
perspective: 100px;
}
.carousel__viewport {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
overflow-x: scroll;
counter-reset: item;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.carousel__slide {
position: relative;
flex: 0 0 100%;
width: 100%;
background-color: #f99;
counter-increment: item;
}
#carousel__slide1 {
background-color: #3dc0e6;
}
#carousel__slide2 {
background-color: #f89427;
}
#carousel__slide3 {
background-color: #ec7272;
}
#carousel__slide4 {
background-color: #5ab196;
}
.carousel__slide:before {
content: counter(item);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -40%, 70px);
color: #fff;
font-size: 2em;
}
.carousel__snapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
}
@media (hover: hover) {
.carousel__snapper {
animation-name: tonext, snap;
animation-timing-function: ease;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.carousel__slide:last-child .carousel__snapper {
animation-name: tostart, snap;
}
}
@media (prefers-reduced-motion: reduce) {
.carousel__snapper {
animation-name: none;
}
}
.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
animation-name: none;
}
.carousel__navigation {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
.carousel__navigation-list,
.carousel__navigation-item {
display: inline-block;
}
.carousel__navigation-button {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: #333;
background-clip: content-box;
border: 0.25rem solid transparent;
border-radius: 50%;
font-size: 0;
transition: transform 0.1s;
}
.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
position: absolute;
top: 0;
margin-top: 27%;
width: 4rem;
height: 4rem;
transform: translateY(-50%);
border-radius: 50%;
font-size: 0;
outline: 0;
}
.carousel::before,
.carousel__prev {
left: -1rem;
}
.carousel::after,
.carousel__next {
right: -1rem;
}
.carousel::before,
.carousel::after {
content: "";
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
pointer-events: none;
}
.carousel::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}
.carousel::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}
Here is a collection of sliders from around the web you can use in your project. The CSS sliders provided will be written in CSS and HTML, with sometimes JavaScript mixed in. Using these examples is relatively easy as long as you have some experience in HTML, CSS, and JavaScript. Included are links with examples and code for use on your website.

About Project
HTML CSS Driven Responsive Image Slider
HTML CSS Driven Responsive Image Slider is a project on codepen.io which uses CSS keyframes to generate a sliding animation. This example uses HTML figure and figcaption elements to markup the image element. Also, when the screen is resized, the slider resizes to fit the screen horizontally.
Links

About Project
Responsive Image Slider
Responsive Image Slider is a project on codepen.io which uses CSS and JQuery to animate a solid rectangle slider. You can add your images to fill in the colored backgrounds of each slide. The project uses CSS transitions on the next and previous button’s opacity for a fade-in, fade-out hover effect.
Links

About Project
Pure CSS Featured Image Slider
Pure CSS Featured Image Slider is a project on codepen.io which uses pure CSS to create an image slider. The image slider has a picture frame border representing a real-world art frame. Addionally, the CSS slider contains round black buttons at the frame’s bottom to navigate the slides. This example only uses 24 lines of HTML.
Links

About Project
GSAP Slider
GSAP Slider is a project on codepen.io which uses CSS, GSAP JavaScript library, and JQuery to create an exceptional CSS slider. The slider includes navigation buttons and snippet of text with a read more link. The slider works on multiple screen sizes. This example also uses CSS flex to layout the content within each slide and to place each slide in a row.
Links

About Project
Slicebox 3D Image Slider
Slicebox 3D Image Slider is a project on codepen.io which uses CSS, JQuery Slicebox library, and Jquery to create a 3D rotating image slider. This image slider scales to fit the screen as the screen size changes. Also, this project includes buttons to navigate the image slides left or right. Included in the CSS styles is a special transition. The transition is preserve-3d which makes the child element keep it’s 3D position.
Links

About Project
CSS Only Image Slider
CSS Only Image Slider is a project on codepen.io which contains two image slides. A slide is loaded in via an animation when a user clicks on one of the buttons. The animation slices two images down the middle and blurs the slide to the next one. This animation is created without the CSS keyframes at-rule.
Links

About Project
Canvas Image Slider
Canvas Image Slider is an image slider on codepen.io which uses CSS and the GSAP Tweenmax JavaScript library to create a multilayered lens. The slider moves the layers in lens focus as the animation traverses to the next slide. Next, the slider blurs the layers and loads the next image from the opposite direction. Addionally, the lens slider is responsive to different screen sizes.
Links

About Project
Image Slider With Masking Effect
Image Slider With Masking Effect is a project on codepen.io in which an image slider is designed as a card. The card uses a CSS drop shadow to create a raised effect, as if the slider is floating above the document. You can navigate the different slides when clicking the arrows inside the card. When the slider loads in new text, the text fades into view. This project uses a cool CSS transition style called cubic-bezier which is a type of easement when transitioning the slides.
Links

About Project
Flexbox Image Slider
Flexbox Image Slider is a project on codepen.io in which an image slider is created using CSS flexbox. The slider includes navigation buttons outside of the slider frame. When hovering over the navigation buttons, the buttons scale up, which causes the buttons to enlarge as the cursor hovers over the button. The scale animation is made using the CSS transform translateX.
Links

About Project
Fullscreen Image Slider
Fullscreen Image Slider is a project on codepen.io where the author has created a fullscreen image slider. When the slider is resized using the screen or viewed on a different device, the slider resizes the fill the entire screen. The project uses pure JavaScript the give the buttons the ability to control the slider direction. Event listeners are attached to each navigation button and trigger the JavaScript custom slide function.
Links

About Project
Modular Responsive Image Slider
Modular Responsive Image Slider is a project on codepen.io that expands to the full page. The image slider is responsive and resizes to fit different screen sizes. This project is modular, which means you can stack the sliders like blocks to build different row lengths or even a grid. When clicking on the navigation dots, the dots pulse with an animation effect to reflect the click. Also, when hovering over the slider, the navigation arrows slide and fade into the viewport to become clickable.
Links

About Project
Auto Generated Responsive CSS Slider
Auto Generated Responsive CSS Slider is a project on codepen.io which utilizes only images for each slide of the slider. The slider is responsive and resizes to fit different screen sizes. This example uses CSS translate3d and CSS keyframe at-rules to control the slide animations.
Links

About Project
Image Slider CSS Only
Image Slider CSS Only is a project on codepen.io, which is built with only HTML and CSS. You can add images to this slider by extending the HTML code and CSS classes that reference a new slide. The user can change the content on the slider by using the white navigation circles in the middle bottom portion of the CSS slider.
Links

About Project
Pure CSS3 Responsive Slider
Pure CSS3 Responsive Slider is a project on codepen.io, which is created in pure CSS. This slider includes left and right navigational arrows and navigation dots in the middle bottom portion of the slider. To animate the slider, it uses a CSS keyframe at-rule to fade in the image when the user changes the slide. The fade in effect is made by using the CSS opacity property and mixing in an ease-in-out CSS transition.
Links

About Project
Image Slider With Mobile Swipe
Image Slider With Mobile Swipe is a project on codepen.io which uses HTML, CSS, and JavaScript. The image slider includes an automatic sliding animation which is triggered every 4 seconds by a JavaScript variable (“let interval = 4000”). The slides can be switched by swiping the screen when using this image slider with a mobile device. This functionality is created by using the touchend JavaScript event listener.
Links

Onboarding Screens
About Project
Links

Information Card Slider
About Project
Links

Image Comparison Slider
About Project
Links

Before After Image Slider (Vanilla)
About Project
Links

Javascriptless Before_After Slider
About Project
Links

Split-Screen UI
About Project
Links

Before & After Slider Gallery With SVG Masks
About Project
Links

HTML5 Before & After Comparison Slider
About Project
Links

Linear Slider With SplitText Effect _ Greensock
About Project
Links

Linear Slider With SplitText Effect _ Greensock
About Project
Links

Smooth 3D Perspective Slider
About Project
Links

Fullscreen Hero Image Slider (Swipe Panels Theme)
About Project
Links

Responsive Parallax Drag-slider With Transparent Letters
About Project
Links

Popout Slider
About Project
Links

Gray & White – Skewed Slider With Scrolling
About Project
Links

Gray & White – Skewed Slider With Scrolling
About Project
Links

Pokemon Slider
About Project
Links

Slider Parallax Effect
About Project
Links

Slider with Ripple Effect v1.1
About Project
Links

Clip-Path Revealing Slider
About Project
Links

Full Page Slider
About Project
Links

Full Slider Prototype
About Project
Links
![Greensock Animated Slideshow [Wip] Greensock Animated Slideshow [Wip]](https://i2.wp.com/appcode.app/wp-content/uploads/2022/03/Greensock-Animated-Slideshow-Wip.png?w=1290&ssl=1)
Greensock Animated Slideshow [Wip]
About Project
Links

Pure CSS Slider With Custom Effects
About Project
Links

Fullscreen Drag-Slider With Parallax
About Project
Links

Actual Rotating Slider
About Project
Links

CSS Carousel With Keyboard Controls
About Project
Links

CSS Slider – Pure CSS – #10
About Project
Links

Pure CSS Slideshow
About Project
Links

Pure CSS Carousel
About Project
Links
