Automatic Image Slider in HTML CSS
The automatic image slider is the function to display multiple images in a single div tag with the html elements and css properties. We can save the image and create pages.
Examples
The following examples show the multiple image shoulder with the css properties.
Example 1:
The example shows the multiple images slide automatically from right to left and vice versa.
<!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: 40%;
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://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm5vqieec4mjwoyzi8x1.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7jakmy309bzbuhbjfn4.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roj2muylbkhsm39450mg.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp16bsz6ihecztrww91w.jpg" alt = "">
<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/niqqsvmzx1k3n03kv5fk.jpg" alt = "">
</div>
</div>
</header>
</body>
</html>
Output
The output shows the automatic image slider in html and css.
Example 2:
The following example shows the automatic image slider with the css properties. We can set the four images for the period and show them continuously.
<!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://unsplash.it/650/420?image=924" alt = "Slide 1" />
</li>
<li class = "slider__slide">
<img src = "https://unsplash.it/650/420?image = 923" alt = "Slide 2" />
</li>
<li class = "slider__slide">
<img src = "https://unsplash.it/650/420?image=922" alt = "Slide 3" />
</li>
<li class = "slider__slide">
<img src = "https://unsplash.it/650/420?image=921" alt = "Slide 4" />
</li>
</ul>
</div>
<div class = "slider__control">
<label for = "sliderSwitch"></label>
</div>
</body>
</html>
Output:
The output shows the automatic image slider in html and css.
Example 3:
The following example shows the static and automatic image slider div or container.
<!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: 5px; 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://picsum.photos/200?random = 1" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=2" alt = ""></div>
</div>
</div>
<div class = "row small">
<div class = "imagegroup" style = "animation-delay: 2s;">
<div class = "card"><img src = "https://picsum.photos/200?random=3" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=4" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=5" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=6" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=7" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=8" alt = ""></div>
</div>
</div>
</header>
</body>
</html>
Output:
The output shows the automatic image slider in html and css.
Example 4:
The example shows the basic slider for the multiple images in the container. We can slide multiple images within the period.
<!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://picsum.photos/200?random=5" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=6" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=7" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=8" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=3" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=4" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=1" alt = ""></div>
<div class = "card"><img src = "https://picsum.photos/200?random=2" alt = ""></div>
</div>
</div>
</body>
</html>
Output:
The output shows the automatic image slider in html and css.
Conclusion
The automatic image slider slides multiple images using the html elements, image tag, and css properties.