Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a carousel with the help of CSS?
Carousels are well-known on the internet. Web carousels are an elegant way to organise similar material into one tactile place while preserving valuable website real estate. They're used to display photographs, offer products, and attract new visitors' interest. But how effective are they? There are numerous arguments against carousels, as well as research into using carousels to improve performance. But how does a carousel influence web usability?
In this article, we will discuss about basics of carousels and how to create a carousel using HTML and CSS.
What is a Carousel?
A carousel is a type of slideshow that displays a series of revolving banners/images. Carousels are commonly found on a website's front page. 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 video in a single dynamic, "sliding" block. They're an excellent design choice for grouping content and concepts, allowing you to build visual linkages between specific pieces of content.
Web carousels are therefore ideal for promoting related products on e-commerce websites, presenting featured projects on a design portfolio, or even cycling through interior and exterior pictures of a home on a real estate website. However, they are not always the best option.
Many designers criticise them for slowing down load times and disrupting the flow of a design. However, as with anything design-related, when done correctly, web carousels may divide up content in a way that makes it easier to traverse.
How to make a web carousel?
Here, we will see how we can make a simple web carousel without using frameworks like Bootstrap.
Steps to be followed
Create the basic structure of the carousel, which contains the images, using HTML. In the following example, we have added 4 images for the carousel. Also, there are 4 buttons which on clicking will display the respective image.
First, create a div element which acts as the container including the title and the content.
Now, the content div contains two parts- the carousel content (contains the written part which remains fixed throughout the transition) and the slideshow (contains the moving part which are the 4 images and the buttons).
Use CSS to style the carousel images and the buttons. Keep the position of the slideshow as relative.
Use CSS animations for smooth transition of the images in the carousel.
Example
The following example demonstrates a carousel containing 4 images and buttons which control the display of the images. The images are displayed in transition of a fixed interval of time.
<!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">
</div>
<div class= "slide">
<img class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg">
</div>
<div class= "slide">
<img class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293?width=700">
</div>
<div class= "slide">
<img class= "img" src="https://wallpaperaccess.com/full/1164582.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Transform Property
To modify the coordinate space utilised by the visual formatting model, use the transform property in CSS. In doing so, effects like skew, rotation, and translation may be applied 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 the element to its default value.
inherit − It takes its parent element's value.
CSS Animations
The animation property of CSS allows us to change various styling properties to an element during a certain interval of time which gives it an animating effect.
Some of the properties of animation are as follows −
Animation-name – It enables us to specify the name of the animation which is later used by @keyframes to specify the CSS which rule to be executed with that animation.
Animation-duration – sets the duration of time for the animation
Animation-timing-function – indicates the speed curve of an animation that is, the time interval used by the animation to change from one set of CSS custom properties to other.
Animation-delay – makes a delay for the start value for given time interval
@keyframes is used to specify exactly which code needs to be executed within the animation during the given time duration. This is done by stating the CSS properties for certain particular ‘frames’ during the animation, with percent from 0% (beginning of animation) to 100% (ending of animation).
761 Views
