The automated image carousel is a feature that showcases numerous images within a singular <div> element by utilizing HTML elements and CSS attributes. It enables users to store images and generate web pages.
Examples
Below are examples demonstrating how to create a multiple image gallery using CSS properties.
Example 1:
The demonstration illustrates a scenario where several images transition automatically between sliding from right to left and vice versa.
Example
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> Automatic image slider in html css </title>
<style media = "screen">
header {
max-width: 1200px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.row {
display: flex;
overflow: hidden;
}
.imagegroup {
display: flex;
width: 100%;
}
.imagegroup img{
flex-shrink: 0;
object-fit: cover;
border: 3px solid white;
}
.imagegroup {
animation: travel 20s ease-in-out infinite;
}
@keyframes travel {
0%, 100% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(-100%,0,0);
}
}
</style>
</head>
<body>
<h2> Automatic image slider in html css </h2>
<p> We can see the multiple images for the automatic slide in 1 second </p>
<header>
<div class = "row small">
<div class = "imagegroup" style = "animation-delay: 1s;">
<img src = "https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" alt = "">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "">
<img src = "https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt = "">
<img src = "https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt = "">
</div>
</div>
</header>
</body>
</html>
Output
The result demonstrates the automated image carousel created using HTML and CSS.
Example 2
Below is a demonstration of an automated image carousel using CSS attributes. It allows for the rotation of four images over a specified time interval, displaying them in a continuous loop.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> Automatic image slider in html css </title>
<style>
body {
font-size: 100%;
background: #f1f1f1;
}
/* Fallback for hidden attribute */
hidden {
display: none;
}
/** * Keyframes for autoplay */
@-webkit-keyframes autoplay {
/* position of the first slide */
0% {
left: 0;
}
/* position of the second slide */
25% {
left: -40.625rem;
} /* position of the third slide */
50% {
left: -81.25rem;
} /* position of the fourth slide */
100% {
left: -121.875rem;
}
}
@keyframes autoplay {
/* position of the first slide */
0% {
left: 0;
} /* position of the second slide */
25% {
left: -40.625rem;
} /* position of the third slide */
50% {
left: -81.25rem;
} /* position of the fourth slide */
100% {
left: -121.875rem;
}
} /** * Slider */
.slider {
position: relative; /* top margin is for purposes of demo */
margin-top: 3rem;
margin-right: auto;
margin-left: auto;
overflow: hidden;
width: 40.625rem;
height: 26.25rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.slider__list {
position: absolute;
left: 0;
width: 162.5rem;
}
.slider__slide {
float: left;
} /** * Slider control */
.slider__control {
margin-right: auto;
margin-left: auto;
width: 4.5rem;
font-family: sans-serif;
}
.slider__control label {
position: relative;
display: block;
margin-top: 2rem;
margin-bottom: 1rem;
width: 4.5rem;
height: 2rem;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: transparent;
background: #ddd;
border-radius: 2rem;
cursor: pointer;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.slider__control label:before {
content: "autoplay";
position: absolute;
top: 2.5rem;
left: 0;
color: #333;
font-size: 0.95rem;
font-weight: bold;
text-transform: uppercase;
}
.slider__control label:after {
content: "";
position: absolute;
top: 0.25rem;
left: 0.25rem;
display: block;
width: 1.5rem;
height: 1.5rem;
border-radius: 2rem;
background: #fff;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slider__switch:checked + .slider > .slider__list {
-webkit-animation-name: autoplay;
animation-name: autoplay; /* This will change the time it takes to move to the next slide */
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.slider__switch:checked + .slider + .slider__control > label {
background: #455a64;
}
.slider__switch:checked + .slider + .slider__control > label:after {
left: 2.75rem;
}
</style>
</head>
<body>
<h2 style = "margin-top: 150px; text-align: center > Automatic image slider in html css </h2>
<p style = "text-align: center > we can see the multiple image for the automatic slide in 10 second </p>
<input
id = "sliderSwitch"
class = "slider__switch"
type = "checkbox"
name = "sliderSwitch"
hidden
/>
<div class = "slider">
<ul class = "slider__list">
<li class = "slider__slide">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "Slide 1" />
</li>
<li class = "slider__slide">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "Slide 2" />
</li>
<li class = "slider__slide">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "Slide 3" />
</li>
<li class = "slider__slide">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "Slide 4" />
</li>
</ul>
</div>
<div class = "slider__control">
<label for = "sliderSwitch"></label>
</div>
</body>
</html>
Output
The result displays an automated image carousel created using HTML and CSS.
Example 3:
Below is an illustration demonstrating a fixed and dynamic image slider within a div or container.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> Automatic image slider in html css </title>
<style>
header {
max-width: 1024px;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.row {
display: flex;
overflow: hidden;
}
.imagegroup {
display: flex;
width: 100%;
}
.imagegroup img{
flex-shrink: 0;
object-fit: cover;
border: 3px solid white;
}
.imagegroup {
animation: travel 20s ease-in-out infinite;
}
@keyframes travel {
0%, 100% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(-100%,0,0);
}
}
</style>
</head>
<body>
<h2 style = "margin-top: 150px; text-align: center > Automatic image slider in html css </h2>
<p style = "text-align: center > we can see the two static image and multiple image for the automatic slide in 2 second </p>
<header>
<div class = "row large">
<div class = "imagegroup" style = "border:2px solid white">
<div class = "card"><img src = "https://placehold.co/800x600/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
</div>
</div>
<div class = "row small">
<div class = "imagegroup" style = "animation-delay: 2s;">
<div class = "card"><img src = "https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/800x200/1abc9c/ffffff?text=Banner" alt = ""></div>
</div>
</div>
</header>
</body>
</html>
Output
The result displayed is an automated image carousel created using HTML and CSS.
Example 4:
The illustration demonstrates a fundamental slider for displaying multiple images within a designated container. It allows for the smooth sliding of multiple images over a specified duration.
Example
<!DOCTYPE html>
<html lang = "en">
<!-- codingflicks.com -->
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>Auto image slideshow using HTML CSS</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #17374c;
}
.slider-area {
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
width: 90vmin;
border-radius: 10px;
border: 30px ridge #ddd;
overflow: hidden;
}
.img-area{
width: 100%;
display: flex;
animation: animate 15s linear infinite;
}
.img-area img{
max-width: 100%;
}
@keyframes animate{
0%{
transform: translateX(0);
}
25%{
transform: translateX(0);
}
30%{
transform: translateX(-30%);
}
50%{
transform: translateX(-50%);
}
55%{
transform: translateX(-55%);
}
75%{
transform: translateX(-100%);
}
80%{
transform: translateX(-120%);
}
100%{
transform: translateX(-200%);
}
}
</style>
</head>
<body>
<h2 style = "margin-top: 150px; text-align: center > Automatic image slider in html css </h2>
<p style = "text-align: center > we can see the multiple image for the automatic slide using keyframes </p>
<div class = "slider-area">
<div class = "img-area">
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
<div class = "card"><img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = ""></div>
</div>
</div>
</body>
</html>
Output
The result displays an automated image carousel created using HTML and CSS.
Conclusion
The automated image carousel displays several images by utilizing HTML elements, such as the image tag, in conjunction with CSS properties.