A slider, also known as a carousel, is a web element that animates a series of images, videos, or graphics in a set direction (either horizontally or vertically), creating a slideshow effect. A typical image slider usually consists of two or more images and, sometimes, a navigation feature that allows for controlling the slider in opposite directions.
Image sliders serve various useful purposes in web development. For example, they could help your site look lively and allow you to maximize the use of limited space on your website.
While many libraries and frameworks are available for creating image sliders in web development, in this article, we’ll guide you through how to build one from scratch using only HTML and CSS.
In this article:
Responsive Image Slider with Navigation
Step 1 – Set up the HTML structure
We’ll start building our image slider by creating the base HTML structure. Create a new folder and inside it, create two files named index.html and index.css. Then add the following code to index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="container">
<div class="slider-wrapper">
<div class="slider">
<img id='slide-1' src="https://images.unsplash.com/photo-1714745455353-f47a2e2b5647?q=80&w=2070&auto=format&fit=crop" alt="a-man-in-a-black-hat-is-standing-in-the-middle-of-the-street"/>
<img id='slide-2' src="https://images.unsplash.com/photo-1713458159923-e511573e905c?q=80&w=2071&auto=format&fit=crop" alt="a-living-room-filled-with-furniture-and-a-fire-place"/>
<img id='slide-3' src="https://images.unsplash.com/photo-1714329781250-64b9125f689c?q=80&w=1932&auto=format&fit=crop" alt="a-group-of-rocks-sitting-on-top-of-a-desert"/>
<img id="slide-4" src="https://images.unsplash.com/photo-1699862160391-97c6e8dcd173?q=80&w=1932&auto=format&fit=crop" alt="a-man-standing-in-front-of-a-doorway-in-the-desert"/>
<img id="slide-5" src="https://images.unsplash.com/photo-1714268437502-dee824f962a0?q=80&w=1974&auto=format&fit=crop" alt="a-group-of-butterflies-flying-through-the-air"/>
</div>
<div class="slider-nav">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
<a href="#slide-4"></a>
<a href="#slide-5"></a>
</div>
</div>
</section>
</body>
</html>
Here’s what the code above does.
First, we define a section element with a container class to contain the image slider. The div element with a class of slider-wrapper contains the entire slider, including the div for images (having a class of slider), and the slider navigation controls in another div having a class of slider-nav.
The div with a class of slider contains img tags for adding the slider images. These images are sourced from Unsplash but you’re free to use any images of your choice.
The slider navigation uses HTML anchor links to target each image in the slider so we can slide to a particular image in the slideshow without using JavaScript.
Step 2 – Add CSS Styles
Next, add the following code to the index.css file:
body {
background-color: #f8fafc;
}
.container {
padding: 2rem;
}
.slider-wrapper {
position: relative;
max-width: 48rem;
margin: 0 auto;
}
.slider {
display: flex;
aspect-ratio: 16 / 9;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
border-radius: 0.5rem;
-ms-overflow-style: none; /* Hide scrollbar IE and Edge */
scrollbar-width: none; /* Hide scrollbar Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.slider::-webkit-scrollbar {
display: none;
}
.slider img {
flex: 1 0 100%;
scroll-snap-align: start;
object-fit: cover;
}
.slider-nav {
display: flex;
column-gap: 1rem;
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%); /*Position the navigation icons in the middle */
z-index: 1;
}
.slider-nav a {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.75;
transition: opacity ease 250ms;
}
.slider-nav a:hover {
opacity: 1;
}
Let’s go over the CSS code to understand what it’s doing.
aspect-ratio: 16 / 9sets the aspect ratio of the slider to 16:9, which is a common aspect ratio for images.overflow-x: autoallows horizontal scrolling if the images exceeds the container’s width. Since we’re using multiple images that are clearly larger than the slider container, adding this property creates a scrolling effect on the x-axis.scroll-snap-type: x mandatoryandscroll-behavior: smoothenables smooth snapping to the next/previous image when scrolling horizontally.- Finally, each image within the
.slidercontainer hasscroll-snap-align: startapplied to it. This means that when scrolling horizontally, each image will snap and align its start edge (left edge) with the start edge of the visible area of the slider container. This allows us to see one image in the slider at a time while scrolling.
Now, if you open the HTML file in the browser, you should see the page rendered as shown below:
HTML-CSS Slider
Responsive Image Slider with Auto-sliding
The previous example uses anchor links to navigate the images in the slider. In this example, we’ll modify our code to use CSS animation to create an automatic sliding effect for the images.
Open the index.html file and change its content to the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes slider {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
box-sizing: border-box;
}
body {
background-color: #f8fafc;
}
figure {
margin: 0;
font-weight: 100;
position: relative;
}
div#captioned-gallery {
width: 100%;
position: relative;
max-width: 48rem;
margin: 2rem auto;
overflow: hidden;
box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
border-radius: 0.5rem;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 20s slider infinite;
}
figure.slider figure {
width: 20%;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #fff;
width: 100%;
font-size: 2rem;
padding: .6rem;
}
</style>
</head>
<body>
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="https://images.unsplash.com/photo-1714745455353-f47a2e2b5647?q=80&w=2070&auto=format&fit=crop" alt="a-man-in-a-black-hat-is-standing-in-the-middle-of-the-street"/>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1713458159923-e511573e905c?q=80&w=2071&auto=format&fit=crop" alt="a-living-room-filled-with-furniture-and-a-fire-place"/>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1714329781250-64b9125f689c?q=80&w=1932&auto=format&fit=crop" alt="a-group-of-rocks-sitting-on-top-of-a-desert"/>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1699862160391-97c6e8dcd173?q=80&w=1932&auto=format&fit=crop" alt="a-man-standing-in-front-of-a-doorway-in-the-desert"/>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1714268437502-dee824f962a0?q=80&w=1974&auto=format&fit=crop" alt="a-group-of-butterflies-flying-through-the-air"/>
</figure>
</figure>
</body>
</html>
In the above example, the slideshow effect is created by the values defined in the keyframes called slider, which specify the position of the slider at different points in the animation.
The keyframes define the horizontal position (left) of the slider at different percentages of the animation duration. For example, 0% means the start of the animation, 20% means 20% through the animation, and so on. Therefore, as the animation progresses, the container element moves horizontally according to the keyframes, creating the sliding effect.
The animation: 20s slider infinite; declaration applies the slider animation to the figure.slider element, with a duration of 20 seconds in an infinite loop.
Wrapping Up
In this post, we’ve shown you how to build a responsive image slider using only HTML and CSS, in two different ways. This is interesting because JavaScript is the standard method for adding interactivity or implementing features like this on the web. Furthermore, your ability to build a responsive image slider without relying on external libraries or frameworks will help you strengthen your HTML and CSS skills for future purposes.
Looking for a powerful and flexible platform to store, transform, optimize, and serve your images? Cloudinary can dynamically transform your images and videos with their flexible DAM solution and powerful programmable media, allowing you to easily edit and manage your assets at scale.
Unlock the full potential of your digital content with Cloudinary’s advanced editing and optimization tools. Sign up for free today!