how to add a image to a home slider in smt and make work with the help of key frames
to do this we need to set the images in the percentage
solution:
<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: 800%;
height: 100%;
position: relative;
/* you can change the animation settings from below */
animation: slideshow 30s 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: 0%; }
20% { left: 0%; }
25% { left: -100%; }
35% { left: -100%; }
40% { left: -200%; }
50% { left: -200%; }
55% { left: -300%; }
60% { left: -300%; }
70% { left: -400%; }
75% { left: -400%; }
80% { left: -500%; }
88% { left: -500%; }
95% { left: -600%; }
100% { left: -600%; }
110% { left: 0%; }
}
</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/ABRASIVES?display=table" target="_blank">
<img class="bannerImage" src="../SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/upadted-banner%201.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<a href="https://www.oneweld.ca/POLISHING?display=table" target="_blank">
<img class="bannerImage" src="../SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/upadted-banner%202.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<a href="https://www.oneweld.ca/CERAMICON-XT100-CUTTING-DISCS?quantity=1&custcol_matrix_options=53305" target="_blank">
<img class="bannerImage" src="../SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/upadted-banner%203.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<a href="https://www.oneweld.ca/" target="_blank">
<img class="bannerImage" src="../SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/upadted-banner%204.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<a href="https://www.oneweld.ca/WELDING?display=table" target="_blank">
<img class="bannerImage" src="../SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/upadted-banner%205.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<a href="https://www.oneweld.ca/WELDING?display=table" target="_blank">
<img class="bannerImage" src="../SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/upadted-banner%206.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<a href="https://www.oneweld.ca/" target="_blank">
<img class="bannerImage" src="../SSP%20Applications/One%20Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/OWMayPromo.jpg"alt="banner image" style="width:100%"></a>
</div>
<div class="slide">
<a href="https://www.oneweld.ca/" target="_blank">
<img class="bannerImage" src="../SSP Applications/One Weld/SCA-OneWeld-Dev-Kilimanjaro/img/Image-Slider/home-slider7.jpgg"alt="banner image" style="width:100%"></a>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>