Example:
<html>
<head>
<style>
.slideshow-container {
max-width: 600px;
position: relative;
margin: auto;
overflow: hidden;
}
.slides {
display: flex;
animation: slide 6s infinite;
}
.slides li {
flex: 0 0 100%;
}
@keyframes slide {
0%, 100% {
transform: translateX(0);
}
16.67%, 33.33% {
transform: translateX(-100%);
}
50%, 66.67% {
transform: translateX(-200%);
}
}
.slides img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="slideshow-container">
<ul class="slides">
<li><img src="../../../assets/img/codebetter1.png" alt="Slide 1"></li>
<li><img src="../../../assets/img/code.jpg" alt="Slide 2"></li>
<li><img src="../../../assets/img/cb1.jpg" alt="Slide 3"></li>
</ul>
</div>
</body>
</html>
Output:
