Home > Article > Web Front-end > How to create a carousel with the help of CSS?
How to create a carousel with the help of CSS?
- WBOYforward
- 2023-08-23 12:33:05837browse
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 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/images/simply-easy-learning.jpg" alt="How to create a carousel with the help of CSS?" >
</div>
<div class= "slide">
<img class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg" alt="How to create a carousel with the help of CSS?" >
</div>
<div class= "slide">
<img class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293? style="max-width:90%" alt="How to create a carousel with the help of CSS?" >
</div>
<div class= "slide">
<img class= "img" src="https://wallpaperaccess.com/full/1164582.jpg" 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!