How to create a carousel with CSS
How to Create a Carousel with CSS
Carousels are well-known on the internet. Web carousels are an elegant way to organize similar material into a tangible place while preserving valuable website space. They are used to showcase photos, offer products, and attract the interest of new visitors. But how effective are they? There are many arguments against carousels, as well as studies showing that using carousels improves performance. But how do carousels affect the usability of a web page?
In this article, we’ll discuss the basics of carousels and how to create one using HTML and CSS.
What is a Carousel
A carousel is a slideshow that displays a series of rotating banners/https://coder-cafe.com/wp-content/uploads/2025/09/images. Carousels often appear on website homepages and can enhance the look of your website. Web carousels, also known as sliders, galleries, and slideshows, allow you to display text, graphics, https://coder-cafe.com/wp-content/uploads/2025/09/images, and even videos in a single, dynamic, “sliding” block. They’re a great design choice for grouping content and concepts, allowing you to create visual connections between specific pieces of content.
Web carousels are therefore ideal for promoting related products on e-commerce sites, showcasing featured projects in a design portfolio, or even cycling through interior and exterior https://coder-cafe.com/wp-content/uploads/2025/09/images of homes on a real estate website. However, they aren’t always the best choice.
Many designers criticize them for slowing down loading times and disrupting the flow of a design. However, like anything design-related, when done correctly, web carousels can divide up content in a way that makes it easier to navigate.
How to Make a Web Carousel
Here, we’ll see how to make a simple web carousel without using a framework like Bootstrap.
Steps to Follow
- Use HTML to create the basic structure of a carousel, which contains https://coder-cafe.com/wp-content/uploads/2025/09/images. In the example below, we’ve added four https://coder-cafe.com/wp-content/uploads/2025/09/images to the carousel. Additionally, there are four buttons that display the corresponding https://coder-cafe.com/wp-content/uploads/2025/09/images when clicked.
-
First, create a div element that serves as a container for the title and content .
-
Now, the content div contains two sections – the carousel content (which contains the written content and remains fixed throughout the transition) and the slideshow (which contains the moving parts, namely the four https://coder-cafe.com/wp-content/uploads/2025/09/images and the button).
-
Use CSS to style the carousel https://coder-cafe.com/wp-content/uploads/2025/09/images and buttons. Maintain the relative positioning of the slides.
-
Use CSS animations to smoothly transition between https://coder-cafe.com/wp-content/uploads/2025/09/images in a carousel.
Example
The following example shows a carousel with four https://coder-cafe.com/wp-content/uploads/2025/09/images and buttons to control image display. The https://coder-cafe.com/wp-content/uploads/2025/09/images are displayed at a fixed interval.
<!DOCTYPE html>
<html>
<head>
<title> Web Carousel </title>
<style>
* {
box-sizing: border-box;
margin: 10px;
padding: 3px;
}
body {
background-color: rgb(195, 225, 235);
}
.box {
width: 600px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
.title {
padding: 10px 0 10px 0;
position: absolute;
top: 10px;
}
.content {
position: relative;
top: 10%;
}
.carousel-content {
position: absolute;
top: 50%;
left: 45%;
transform: translate(-40%, -40%);
text-align: center;
z-index: 50;
}
.carousel-title {
font-size: 48px;
color: black;
margin-bottom: 1rem;
font-family: Times New Roman;
}
.slideshow {
position: relative;
height: 100%;
overflow: hidden;
}
.wrapper {
display: flex;
width: 400%;
height: 100%;
top: 10%;
border-radius: 30%;
position: relative;
animation: motion 20s infinite;
}
.slide {
width: 80%;
height: 200%;
border-radius: 30%;
}
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes motion {
0% {left: 0;}
10% {left: 0;}
15% {left: -100%;}
25% {left: -100%;}
30% {left: -200%;}
40% {left: -200%;}
45% {left: -300%;}
55% {left: -300%;}
60% {left: -200%;}
70% {left: -200%;}
75% {left: -100%;}
85% {left: -100%;}
90% {left: 0%;}
}
.button {
position: absolute;
bottom: 3%;
left: 50%;
width: 1.3rem;
height: 1.3rem;
background-color: red;
border-radius: 50%;
border: 0.2rem solid #d38800;
outline: none;
cursor: pointer;
transform: translateX(-50%);
z-index: 70;
}
.button-1 {
left: 20%;
}
.button-2 {
left: 25%;
}
.button-3 {
left: 30%;
}
.button-4 {
left: 35%;
}
.button-1:focus~.wrapper {
animation: none;
left: 0%; }
.button-2:focus~.wrapper {
animation: none;
left: -100%;
}
.button-3:focus~.wrapper {
animation: none;
left: -200%;
}
.button-4:focus~.wrapper {
animation: none;
left: -300%;
}
.button:focus {
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<h1 class="title"> Responsive Carousel using CSS </h1>
<div class="content">
<div class="carousel-content">
</div>
<div class= "slideshow">
<button class="button button-1"> </button>
<button class="button button-2"> </button>
<button class="button button-3"> </button>
<button class="button button-4"> </button>
<div class="wrapper">
<div class= "slide">
<img class= "img" src= "https://www.tutorialspoint.com/static/https://coder-cafe.com/wp-content/uploads/2025/09/images/simply-easy-learning.jpg">
</div>
<div class= "slide">
<img class= "img" src="https://wallpapercave.com/wp/https://coder-cafe.com/wp-content/uploads/2025/09/wp2782600.jpg">
</div>
<div class= "slide">
<img class= "img" src="https://i.insider.com/https://coder-cafe.com/wp-content/uploads/2025/09/5fd90e7ef773c90019ff1293?width=700">
</div>
<div class= "slide">
<img class= "img" src="https://wallpaperaccess.com/full/https://coder-cafe.com/wp-content/uploads/2025/08/https://coder-cafe.com/wp-content/uploads/2025/09/1164582.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Transform Properties
To modify the coordinate space used by the visual formatting model, you can use the transform properties in CSS. Doing so allows you to apply effects such as skewing, rotating, and translating to elements.
Syntax
transform: none| transform-functions| initial| inherit;
Values
- translate(x, y) – This function defines a translation along the X and Y coordinates.
-
translate3d(x, y, z) – This function provides a translation along the X, Y, and Z coordinates.
-
initial – Sets an element to its default value.
-
inherit – It adopts the value of its parent element.
CSS Animation
CSS animation properties allow us to animate various style properties of an element over a certain time interval.
Some animation properties are as follows
- Animation-name – This allows us to specify a name for the animation, which is then used by @keyframes to specify the CSS rules to be executed by the animation.
-
Animation-duration – Sets the duration of an animation.
-
Animation-timing-function – Specifies the speed of an animation, i.e., the time interval over which the animation changes from one set of CSS custom properties to another.
-
Animation-delay – Delays the start value by a given time interval.
@keyframes specifies which code in an animation should be executed within a given time interval. This is done by specifying CSS properties for specific “frames” of the animation, with percentages ranging from 0% (the start of the animation) to 100% (the end of the animation).