Image Effects Creating Custom Image Cropping Interfaces in Android How to Create Simple Yet Effective PHP Overlay Understanding Real-Time Image Recognition How to add a shadow effect to an image with CSS How to crop an image in Flutter with Cloudinary How To Rotate an Image with Java Image Processing with Python Rotating an image with CSS Enhancing User Experience with a Responsive Image Slider Building a Python Image Recognition System Building an Interactive JavaScript Image Manipulation Tool Image Align Centering with HTML and CSS Efficient Image Cropping Techniques with Angular and Cloudinary Ultimate Guide to Photo Gallery on Android A Comprehensive Guide to Adding Text to Images on Android Mastering Background Changes in React Applications Comprehensive Guide on Changing Background on Android Devices Mastering Image Rotation in Java A Guide to Adding Text to Images with Python A Guide to Converting Images to Grayscale with Python Introduction Creating an Image Overlay with JavaScript Rotating an Image in Python Creating a Dynamic Photo Gallery with jQuery Creating An Interactive Photo Gallery Using JavaScript Mastering Overlay in Android Mastering Angular Overlay: A Comprehensive Guide Comprehensive Guide to Overlay in Flutter Mastering Overlay React for Responsive Design Solutions Create a Blurred Image with PHP: A Comprehensive Guide Guide to Using Blur Image in Flutter Mastering Blur Image in React Native Mastering Image Blurring in Python Mastering the Art of Image Blurring Mastering the Art of Image Blurring in Java The Ultimate Guide to Blurring Images on Android Understanding and Implementing Blur Image in JQuery An Extensive Walkthrough of Blurring Images with JavaScript How to Use HTML, CSS, and JavaScript to Make an Image Slider HTML Image Tag How to Crop GIFs? How to Align Images with CSS Ken Burns Effect – Complete Guide and How to Apply It Cartoonify – Complete Guide on Cartoonify Image Effect Mastering Web Aesthetics: A Comprehensive Guide to Gradient Fades Sepia Effect: The Ultimate Guide to the Sepia Photo Effect What is Vignette? Guide to Vignette Image Editing Pixelate – The Ultimate Guide to the Pixelation Effect How to Outline an Image: Enhancing Visual Appeal and Depth Make Your Photos Pop with Image Effects Upscale Image – Developers guide to AI-driven image upscaling Image Manipulation: History, Concepts and a Complete Guide A Full Guide to Object-aware Cropping Simplify Your Life with Automatic Image Tagging How To Resize Images In WordPress How To Create a Progress Bar For Asset Uploads Animated GIFs – What They Are And How To Create Them How To Automatically Improve Image Resolution AI Drop Shadow Get Image Dimensions From URLs Automatically Add Sepia Effect To Images Automatically Make an Image a Cartoon Automatically Add Blur Faces Effect To Images Automatically Add Background Removal Effect to an Image How to Resize an Image with React How to Easily Resize an Image with React Native

Enhancing User Experience with a Responsive Image Slider

responsive image slider

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

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 / 9 sets the aspect ratio of the slider to 16:9, which is a common aspect ratio for images.
  • overflow-x: auto allows 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 mandatory and scroll-behavior: smooth enables smooth snapping to the next/previous image when scrolling horizontally.
  • Finally, each image within the .slider container has scroll-snap-align: start applied 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:

responsive image slider

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!

Last updated: Sep 8, 2024