Code to add automatically sliding carousel image using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* default stylings */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ----- container stylings:
-> centers the whole content of the page
-> defines width and height for container ----- */
.containerbanner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
width:100%;
height: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px
}
/* ----- end of container stylings ----- */
/* ----- slideshow stylings ----- */
.slideshow {
height: 100%;
overflow: hidden; /* to hide slides in x-direction */
position: relative;
}
/* wrapper which wraps all the slideshow images stylings */
.slideshow-wrapper {
display: flex;
/* We give it width as 400% because we are making a
4 image carousel. If you want to make for example,
5 images carousel, then give width as 500%. */
width: 400%;
height: 100%;
position: relative;
/* you can change the animation settings from below */
animation: slideshow 8s infinite;
}
/* define width and height for images*/
.slide {
width: 100%;
height: 100%;
}
.slide-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* @keyframes are used to provide animations
We make these settings for 4 image carousel.
Make modification according to your needs. */
@keyframes slideshow {
0% { left: -100%; }
10% { left: -100%; }
20% { left: -100%; }
30% { left: -200%; }
40% { left: -200%; }
50% { left: -200%; }
60% { left: -200%; }
70% { left: -200%; }
80% { left: -300%; }
90% { left: -300%; }
100% { left: -300%; }
}
</style>
<!--<title>Geeks For Geeks</title>-->
</head>
<body>
<div class="containerbanner">
<div class="slideshow">
<div class="slideshow-wrapper">
<div class="slide">
<a href="https://www.oneweld.ca/TWECO-STYLE-CABLE-CONNECTORS?quantity=1&custcol_matrix_options=52505" target="_blank"><img class="bannerImage" src="https://www.oneweld.ca/SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/TwecoStyleConnectors.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<img src="https://www.oneweld.ca/SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/OW Feb Promo 1920x400.jpg"alt="banner image" style="width:100%">
</div>
<div class="slide">
<a href="https://www.oneweld.ca/TWECO-STYLE-CABLE-CONNECTORS?quantity=1&custcol_matrix_options=52505" target="_blank"><img class="bannerImage" src="https://www.oneweld.ca/SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/TwecoStyleConnectors.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<img src="https://www.oneweld.ca/SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/OW Feb Promo 1920x400.jpg"alt="banner image" style="width:100%">
</div>
</div>
</div>
</div>
</body>
</html>