Last Updated : 14 Oct, 2024
A carousel is a rotating slideshow component that allows users to view multiple images or content in a compact space. It is typically seen on homepages to showcase featured content.
In building a carousel, we use HTML for the structure and CSS for styling and animations, enabling the automatic rotation of images or content, along with user-controlled buttons for manual navigation.
Step-by-Step Method for Building a CarouselHere, we are going to learn how to build a simple image carousel using HTML and CSS. The carousel will rotate images automatically after a set time interval and include navigation buttons at the bottom for manual control.
We'll also have a static text centered on top of the rotating images. This tutorial focuses on using basic HTML and CSS, without any JavaScript, to achieve the carousel functionality.
Step 1: Basic HTML StructureFirst, let's create the basic HTML structure. It includes a main container with the webpage's main heading and a div with the class content that holds the entire carousel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Carousel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="main-heading">Responsive Carousel using CSS</h1>
<div class="content">
<!-- Static content in the center of the carousel -->
<div class="carousel-content">
<h1 class="carousel-heading">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</div>
<!-- Slideshow section containing carousel images and control buttons -->
<div class="slideshow">
<button class="slide-btn slide-btn-1"></button>
<button class="slide-btn slide-btn-2"></button>
<button class="slide-btn slide-btn-3"></button>
<button class="slide-btn slide-btn-4"></button>
<div class="slideshow-wrapper">
<div class="slide">
<img class="slide-img"
src="https://media.geeksforgeeks.org/wp-content/uploads/20210818140124/image1-300x169.png"
alt="Image 1">
</div>
<div class="slide">
<img class="slide-img"
src="https://media.geeksforgeeks.org/wp-content/uploads/20210818140126/image2-300x169.png"
alt="Image 2">
</div>
<div class="slide">
<img class="slide-img"
src="https://media.geeksforgeeks.org/wp-content/uploads/20210818190339/image5-300x185.png"
alt="Image 3">
</div>
<div class="slide">
<img class="slide-img"
src="https://media.geeksforgeeks.org/wp-content/uploads/20210818141837/image4-300x168.png"
alt="Image 4">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgb(255, 235, 235);
}
/* Container styling for centering the content */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
width: 80%;
max-width: 800px;
height: 600px;
}
/* Main heading styling */
.main-heading {
padding: 2rem 0;
text-align: center;
}
/* Carousel content positioning */
.carousel-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 50;
}
.carousel-heading {
font-size: 2rem;
color: #308d46;
margin-bottom: 1rem;
}
/* Slideshow styling */
.slideshow {
height: 100%;
overflow: hidden;
position: relative;
}
/* Wrapper for the slideshow images */
.slideshow-wrapper {
display: flex;
width: 400%; /* 4 images -> 400% width */
height: 100%;
position: relative; /* Ensure keyframes 'left' works */
left: 0;
animation: slideshow 20s infinite;
}
.slide {
width: 100%;
height: 100%;
}
.slide-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Keyframe animations */
@keyframes slideshow {
0%, 10% { left: 0; }
15%, 25% { left: -100%; }
30%, 40% { left: -200%; }
45%, 55% { left: -300%; }
60%, 70% { left: -200%; }
75%, 85% { left: -100%; }
90%, 100% { left: 0; }
}
/* Carousel control buttons */
.slide-btn {
background-color: #bbb;
border-radius: 50%;
border: .2rem solid #d38800;
width: 1.2rem;
height: 1.2rem;
cursor: pointer;
position: absolute;
bottom: 3%;
left: 50%;
transform: translateX(-50%);
z-index: 70;
}
/* Position each button individually */
.slide-btn-1 { left: 45%; }
.slide-btn-2 { left: 50%; }
.slide-btn-3 { left: 55%; }
.slide-btn-4 { left: 60%; }
/* Stop animation when focused on buttons */
.slide-btn-1:focus ~ .slideshow-wrapper { animation: none; left: 0; }
.slide-btn-2:focus ~ .slideshow-wrapper { animation: none; left: -100%; }
.slide-btn-3:focus ~ .slideshow-wrapper { animation: none; left: -200%; }
.slide-btn-4:focus ~ .slideshow-wrapper { animation: none; left: -300%; }
/* Button focus styling */
.slide-btn:focus {
background-color: #308d46;
}
Output:
From this, we can see that the carousel is looking beautiful for all screen sizes i.e. mobile, tablet, and laptop screens. Do modifications to the above code according to your choice, include it in your project, and have fun building awesome projects.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4