Carousel is very famous on the Internet. Web Carousel is an elegant way to organize similar content into a tactile place while preserving valuable website space. They are used to display photos, offer products, and attract the interest of new visitors. But how effective are they? There are many arguments against carousels, as well as research into using carousels to improve performance. But how do carousels affect website usability?
In this article, we will discuss the basics of carousels and how to create them using HTML and CSS.
What is a carousel?
A carousel is a slide show that displays a series of rotating banners/images. Carousels usually appear on the home page of a website. It improves the appearance of your website. Web carousels, also known as sliders, galleries and slideshows, allow you to display text, graphics, images and even videos in a dynamic "sliding" block. They are an excellent design choice for grouping content and concepts, creating visual links between specific content. Web carousels are therefore ideal for promoting relevant products on e-commerce sites, showcasing featured projects in a design portfolio, or even looping photos of home interiors and exteriors on a real estate website. However, they are not always the best choice. Many designers criticize them for slowing down loading times and ruining the flow of designs. However, as with anything design-related, when done correctly, web carousels can break up content in a way that makes it easier to traverse.
How to create a web page carousel?
Here we will 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 the revolving lantern, which contains images. In the example below, we have added 4 images to the revolving door. In addition, there are 4 buttons, clicking on which will display the corresponding image.
-
First, create a div element as a container, which includes
title and - content
. Now, the
content div contains two parts - - carousel content
(which contains the text part that remains fixed throughout the transition) and slideshow (Contains the moving part, i.e. 4 pictures and buttons). Use CSS to style carousel images and buttons. Keep the slide's position as relative positioning.
Use CSS animations to smoothly transition images in the carousel.
-
The Chinese translation of
Example
is: Example
The following example demonstrates a carousel containing 4 images and a button that controls the display of the images. These images are displayed in transitions at regular intervals.
<!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 id="Responsive-Carousel-using-CSS"> 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 src="/static/imghwm/default1.png" data-src="https://wallpapercave.com/wp/wp2782600.jpg?x-oss-process=image/resize,p_40" class="lazy" class= "img" src= "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg" alt="How to create a carousel with the help of CSS?" >
</div>
<div class= "slide">
<img src="/static/imghwm/default1.png" data-src="https://wallpapercave.com/wp/wp2782600.jpg?x-oss-process=image/resize,p_40" class="lazy" class= "img" alt="How to create a carousel with the help of CSS?" >
</div>
<div class= "slide">
<img src="/static/imghwm/default1.png" data-src="https://i.insider.com/5fd90e7ef773c90019ff1293? style="max-width:90%" class="lazy" class= "img" alt="How to create a carousel with the help of CSS?" >
</div>
<div class= "slide">
<img src="/static/imghwm/default1.png" data-src="https://wallpaperaccess.com/full/1164582.jpg?x-oss-process=image/resize,p_40" class="lazy" class= "img" alt="How to create a carousel with the help of CSS?" >
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Transform Property
To modify the coordinate space used by the visual format model, use the transform property in CSS. By doing this, you can apply effects such as tilt, rotation, and translation to the element.
grammar
transform: none| transform-functions| initial| inherit;
Values
- translate(x, y)
− This function defines translation along the X and Y coordinates.
translate3d(x, y, z)− This function provides translation along the X, Y and Z coordinate axes.
initial-
− Sets an element to its default value.
inherit -
− It inherits the value of the parent element. CSS animation
The animation property of CSS allows us to change various style attributes of an element within a certain time interval to add animation effects to it.
Some characteristics of animation are as follows:
- Animation-name
- It allows us to specify the name of the animation, which is subsequently used by @keyframes to specify the CSS rules to execute the animation.
Animation duration- Set the duration of the animation
Animation time function- Represents the speed curve of animation, that is, the time interval used by the animation to change from one set of CSS custom properties to another.
Animation-delay-
– Sets a delay for a starting value within a given time interval
@keyframes is used to specify the code that needs to be executed in the animation within a given time period. This is accomplished by declaring CSS properties for certain specific "frames" during the animation, with percentages ranging from 0% (the start of the animation) to 100% (the end of the animation).
The above is the detailed content of How to create a carousel with the help of CSS?. For more information, please follow other related articles on the PHP Chinese website!
Using Immer for React State ManagementApr 18, 2025 am 10:41 AMWe make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state
The Making of an Animated FaviconApr 18, 2025 am 10:35 AMIt’s the first thing your eyes look for when you’re switching tabs.
Using Your Domain with a Netlify-Hosted SiteApr 18, 2025 am 10:34 AMNetlify has their own docs for Custom Domains, so if you're looking for horse's mouth technical docs on this stuff, that should be treated as the source of
Pseudo CodeApr 18, 2025 am 10:33 AMYonatan Doron wrote a post on Medium not long ago called "Art of Code — Why you should write more Pseudo Code." Love that title, as a fan of pseudo code
Let's Give Grunt Tasks the Marie Kondo Organization TreatmentApr 18, 2025 am 10:31 AMWe live in an era of webpack and npm scripts. Good or bad, they took the lead for bundling and task running, along with bits of Rollup, JSPM and Gulp. But
Branching Out from the Great DivideApr 18, 2025 am 10:27 AMI like the term Front-End Developer. It's encapsulates the nature of your job if your concerns are:
A Beginner's Journey to Launching a WebsiteApr 18, 2025 am 10:20 AMIn September 2018, I was just a few months into my journey of learning web development. As I'm sure is the case with many new developers, it was a big task
All the New ES2019 Tips and TricksApr 18, 2025 am 10:19 AMThe ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and Safari
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 English version
Recommended: Win version, supports code prompts!
SublimeText3 Chinese version
Chinese version, very easy to use
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
