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.
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.
First, create a div element as a container, which includes
title. Now, the
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.
Example
is:
<!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>
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.
transform: none| transform-functions| initial| inherit;
Values
− This function defines translation along the X and Y coordinates.
− This function provides translation along the X, Y and Z coordinate axes.
− Sets an element to its default value.
− It inherits the value of the parent element. CSS animation
- 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.
- Set the duration of the animation
- 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.
– Sets a delay for a starting value within a given time interval
@keyframesThe 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
