Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a carousel with the help of CSS?
A carousel is a slideshow component that displays multiple images or content pieces in a rotating manner. Carousels are commonly used on websites to showcase featured content, products, or images while saving valuable screen space.
In this article, we will learn how to create a responsive carousel using HTML and CSS with smooth transitions and interactive controls.
Syntax
.carousel-container {
position: relative;
overflow: hidden;
}
.carousel-wrapper {
display: flex;
animation: slide-animation duration infinite;
}
@keyframes slide-animation {
/* Define keyframe percentages and transformations */
}
Basic Carousel Structure
A carousel consists of the following components
Container The outer wrapper that holds all carousel elements
Slideshow area The visible area where images are displayed
Image slides Individual images that rotate through the carousel
Navigation buttons Controls to manually switch between slides
Example: Automatic Carousel with Manual Controls
The following example creates a carousel with 4 images that automatically rotates every few seconds, with manual control buttons
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.slideshow {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slides-wrapper {
display: flex;
width: 400%;
height: 100%;
animation: autoSlide 16s infinite;
}
.slide {
width: 25%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes autoSlide {
0%, 20% { transform: translateX(0%); }
25%, 45% { transform: translateX(-25%); }
50%, 70% { transform: translateX(-50%); }
75%, 95% { transform: translateX(-75%); }
}
.nav-buttons {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.nav-btn {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid white;
background-color: rgba(255,255,255,0.5);
cursor: pointer;
transition: background-color 0.3s;
}
.nav-btn:focus {
background-color: white;
outline: none;
}
.nav-btn:nth-child(1):focus ~ .slides-wrapper {
animation: none;
transform: translateX(0%);
}
.nav-btn:nth-child(2):focus ~ .slides-wrapper {
animation: none;
transform: translateX(-25%);
}
.nav-btn:nth-child(3):focus ~ .slides-wrapper {
animation: none;
transform: translateX(-50%);
}
.nav-btn:nth-child(4):focus ~ .slides-wrapper {
animation: none;
transform: translateX(-75%);
}
.carousel-title {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
z-index: 10;
}
</style>
</head>
<body>
<div class="carousel-container">
<h2 class="carousel-title">CSS Carousel</h2>
<div class="slideshow">
<div class="nav-buttons">
<button class="nav-btn"></button>
<button class="nav-btn"></button>
<button class="nav-btn"></button>
<button class="nav-btn"></button>
</div>
<div class="slides-wrapper">
<div class="slide">
<img src="/static/images/simply-easy-learning.jpg" alt="Learning">
</div>
<div class="slide">
<img src="/static/images/logo-color.png" alt="Logo">
</div>
<div class="slide">
<img src="/static/images/tutorials-point-favicon.ico" alt="Favicon">
</div>
<div class="slide">
<img src="/static/images/simply-easy-learning.jpg" alt="Learning 2">
</div>
</div>
</div>
</div>
</body>
</html>
A responsive carousel appears with 4 rotating images. The carousel automatically transitions between slides every 4 seconds. Users can click the navigation buttons at the bottom to manually control which slide is displayed. The active slide pauses the automatic rotation.
Key CSS Properties
The carousel uses several important CSS properties
transform: translateX() Moves slides horizontally for smooth transitions
@keyframes Defines the automatic sliding animation sequence
overflow: hidden Hides slides that are outside the visible area
:focus selector Allows manual control when buttons are clicked
Conclusion
CSS carousels provide an elegant way to display multiple images in a compact space. By combining CSS transforms, animations, and focus states, you can create both automatic and manual carousel controls without JavaScript.
1K+ Views
