The problem was with the default parameters of the figure tag, which set the spacing between the images. In order to override these rules, add the display: flex and these other rules to the .carousel figure selector.
It should look like this:
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
or like this:
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin: 0;
}
/*carousel container*/
.carousel {
overflow: hidden;
}
/*figure tag containing carousel*/
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin: 0;
}
/*carousel images*/
.carousel figure img {
width: 100vw;
}
/*animations for carousel*/
@keyframes slider {
0% {
left: 0vw;
}
14% {
left: 0vw;
}
15% {
left: -100vw;
}
29% {
left: -100vw;
}
30% {
left: -200vw;
}
44% {
left: -200vw;
}
45% {
left: -300vw;
}
59% {
left: -300vw;
}
60% {
left: -400vw;
}
74% {
left: -400vw;
}
75% {
left: -500vw;
}
90% {
left: -500vw;
}
100% {
left: 0vw;
}
}<div class="carousel">
<figure>
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50">
</figure>
</div>