A gallery carousel is a UI component that displays a series of images or items in a rotating manner. Users can manually switch between items using navigation controls or allow the images to auto-slide at a set interval. Carousels are particularly useful for showcasing multiple images in a limited amount of space, such as a portfolio, product features, or image galleries.
In this tutorial, we'll dive into building a basic gallery carousel layout using HTML and CSS. We’ll cover the key steps, from the basic structure to the styling that will bring your carousel to life.
Step 01: Building the Carousel Layout
To create a simple gallery carousel, we need to combine HTML for the structure and CSS for the layout and styling. Here’s a step-by-step breakdown of how to build it.
Here is a simple HTML structure:
✲ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
<title>Gallery Carousel | Coding Zemigle</title>
</head>
<body>
<div class="carousel-wrapper">
<div class="carousel-container">
<input type="radio" name="slide" id="c1" checked>
<label for="c1" class="card">
<div class="row">
<div class="icon">1</div>
<div class="description">
<h4>Hazel Louise</h4>
<p>Discover the Wonders!</p>
</div>
</div>
</label>
<input type="radio" name="slide" id="c2">
<label for="c2" class="card">
<div class="row">
<div class="icon">2</div>
<div class="description">
<h4>Sophia Claire</h4>
<p>Discover the Wonders!</p>
</div>
</div>
</label>
<input type="radio" name="slide" id="c3">
<label for="c3" class="card">
<div class="row">
<div class="icon">3</div>
<div class="description">
<h4>Samantha Lynn</h4>
<p>Discover the Wonders!</p>
</div>
</div>
</label>
<input type="radio" name="slide" id="c4">
<label for="c4" class="card">
<div class="row">
<div class="icon">4</div>
<div class="description">
<h4>Scarlett Mae</h4>
<p>Discover the Wonders!</p>
</div>
</div>
</label>
</div>
</div>
</body>
</html>The carousel class is the main container that holds the entire carousel.
The carousel-images class holds all the images, while each image is wrapped in a carousel-item div for easy styling and layout control.
Step 02: Styling (CSS)
Now that we have our structure, let’s focus on the styling to create the layout and the necessary transitions for the carousel.
✲ style.css
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Ubuntu", Helvetica, sans-serif;
}
body{
background-color: #131E22;
}
.carousel-wrapper{
width: 100%;
padding: 20px 10px;
margin: 0;
}
.carousel-container{
height: 450px;
display: flex;
flex-direction: nowrap;
justify-content: start;
}
.card{
width: 10%;
background-size: cover;
overflow: hidden;
border-radius: 10px;
margin: 0 10px;
display: flex;
align-items: flex-end;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
transition: .6s cubic-bezier(.28, -0.03,0,0.99);
}
.card > .row{
color: white;
display: flex;
flex-direction: nowrap;
}
.card > .row > .icon{
background: #223;
color: white;
border-radius: 50%;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 15px;
}
.card > .row > .description{
display: flex;
justify-content: center;
flex-direction: column;
overflow: hidden;
height: 80px;
width: 520px;
opacity: 0;
transform: translateY(30px);
transition-delay: .3s;
transition: all .3s ease;
}
.description p{
color: #ffffff;
padding-top: 5px;
}
.description h4{
text-transform: uppercase;
}
input{
display: none;
}
input:checked + label{
width: 600px;
}
input:checked + label .description{
opacity: 1 !important;
transform: translateY(0) !important;
}
.card[for="c1"]{
background-image: url('/images/Hazel.jpg');
}
.card[for="c2"]{
background-image: url('/images/Sophia.jpg');
}
.card[for="c3"]{
background-image: url('/images/Samantha.jpg');
}
.card[for="c4"]{
background-image: url('/images/Scarlett.jpg');
}Make sure to replace /image/image.jpg in CSS file with your actual images.
We use display: flex on the .carousel-images class to arrange the images side by side horizontally. The transition property on .carousel-images ensures smooth sliding when navigating between images. Each .carousel-item takes up 100% of the container’s width, ensuring only one image is shown at a time. The buttons are styled for navigation, positioned on the left and right sides of the carousel.
Image Optimization: Ensure images are properly compressed and optimized for web use. Tools like TinyPNG or JPEG-Optimizer can be helpful.
Lazy Loading: For performance optimization, consider implementing lazy loading for the images so that only visible images are loaded initially.
Accessibility: Make your carousel accessible by adding aria-labels and ensuring that buttons and images are navigable using a keyboard.
Conclusion
Creating a gallery carousel using HTML and CSS is a great way to add dynamic content to your website. By following the steps outlined above, you can create a simple, functional, and responsive carousel that enhances your website’s user experience. Adding interactivity with JavaScript and ensuring responsiveness with CSS media queries will elevate the functionality of your carousel.
With further customization, such as auto-sliding, image captions, or even touch controls for mobile users, you can take your carousel to the next level. Start experimenting with your own carousel and see how it can make your website more engaging and interactive!