slider body code
<!-- code taken from https://codepen.io/amauri7399/pen/vYXXNVx -->
<Section class="img-slider">
<div class="slider-container">
<div class="slide">
<img src="https://app.super.so/_next/image?url=https%3A%2F%2Fassets.super.so%2F47fa140c-5512-4ac6-a02b-6305f7e083a9%2Fimages%2Fdd1f7142-6366-4c27-b0e9-61cb55489501%2Fcentral_library_top.jpg&w=3840&q=80">
</div>
<div class="slide">
<img src="https://app.super.so/_next/image?url=https%3A%2F%2Fassets.super.so%2F47fa140c-5512-4ac6-a02b-6305f7e083a9%2Fimages%2F1fd37325-15ae-481f-aef9-3942a549d5cc%2FDSC_0249.jpeg&w=3840&q=80">
</div>
<div class="slide">
<img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/d7a1bdca-18b2-476b-bfed-62d6dd87b2a2/IMG20240606085214/w=3840,quality=90,fit=scale-down">
</div>
<!-- this code below is dummy and doesn't show the image in slider as this slider code is limited to show only 3 slides.
----
<div class="slide">
<img src="https://app.super.so/_next/image?url=https%3A%2F%2Fassets.super.so%2F47fa140c-5512-4ac6-a02b-6305f7e083a9%2Fimages%2Ff7e9b582-cbf5-4865-ad09-d0c1beaf648d%2Ftnp_group_photo.jpg&w=3840&q=80">
</div>
-->
</div>
</Section>slider css
/* Slider CSS Code */
body {
overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
.img-slider {
position: relative;
width: 100%;
height: calc(100vw * 0.3);
overflow-x: hidden;
margin-bottom: 0px;
}
.img-slider .slider-container {
position: absolute;
width: 300%;
top: 0;
left: 0;
overflow-x: hidden !important;
/* Hide horizontal scrollbar */
animation: slider 26s infinite;
}
.img-slider .slider-container .slide {
position: relative;
width: 33.33333333%;
height: 100%;
float: left;
overflow: hidden;
}
.img-slider .slider-container .slide img {
display: block;
max-width: 1200px;
width: 100%;
height: calc(100vw * 0.3);
margin-left: auto;
margin-right: auto;
}
@keyframes slider {
0%, 25%, 100%{left: 0}
30%, 55%{left: -100%}
60%, 85%{left: -200%}
}