As many people are asking for it, I am sharing slider code from 2 to 10 slides. I have not tested but it should work without any issue. If there is any issue, just comment here.

FOR 2 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

25% {left: 0;}
50% {left: 0;}
75% {left: -100%;}
100% {left: -100%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 3 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

17% {left: 0;}
34% {left: 0;}
50% {left: -100%;}
67% {left: -100%;}
84% {left: -200%;}
100% {left: -200%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 4 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

12% {left: 0;}
25% {left: 0;}
37% {left: -100%;}
50% {left: -100%;}
62% {left: -200%;}
75% {left: -200%;}
87% {left: -300%;}
100% {left: -300%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 5 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

10% {left: 0;}
20% {left: 0;}
30% {left: -100%;}
40% {left: -100%;}
50% {left: -200%;}
60% {left: -200%;}
70% {left: -300%;}
80% {left: -300%;}
90% {left: -400%;}
100% {left: -400%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:20%;float:left;}
#slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 6 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

8% {left: 0;}
17% {left: 0;}
25% {left: -100%;}
34% {left: -100%;}
42% {left: -200%;}
50% {left: -200%;}
58% {left: -300%;}
67% {left: -300%;}
75% {left: -400%;}
84% {left: -400%;}
92% {left: -500%;}
100% {left: -500%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 7 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

7% {left: 0;}
14% {left: 0;}
21% {left: -100%;}
28% {left: -100%;}
35% {left: -200%;}
42% {left: -200%;}
50% {left: -300%;}
57% {left: -300%;}
64% {left: -400%;}
71% {left: -400%;}
78% {left: -500%;}
85% {left: -500%;}
92% {left: -600%;}
100% {left: -600%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 8 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

6% {left: 0;}
12% {left: 0;}
18% {left: -100%;}
25% {left: -100%;}
31% {left: -200%;}
37% {left: -200%;}
43% {left: -300%;}
50% {left: -300%;}
56% {left: -400%;}
62% {left: -400%;}
68% {left: -500%;}
75% {left: -500%;}
81% {left: -600%;}
87% {left: -600%;}
93% {left: -700%;}
100% {left: -700%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 9 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

5% {left: 0;}
11% {left: 0;}
16% {left: -100%;}
22% {left: -100%;}
27% {left: -200%;}
33% {left: -200%;}
38% {left: -300%;}
44% {left: -300%;}
49% {left: -400%;}
55% {left: -400%;}
62% {left: -500%;}
67% {left: -500%;}
73% {left: -600%;}
78% {left: -600%;}
84% {left: -700%;}
89% {left: -700%;}
94% {left: -800%;}
100% {left: -800%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}

FOR 10 SLIDES
HTML

<div style="position: relative; background: rgb(248, 249, 250);"><div id="slider">
<figure>
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
<img src="https://www.yourdoman.com/image.jpg">
</figure>
</div>
</div>

CSS

@keyframes slideshow {

5% {left: 0;}
10% {left: 0;}
15% {left: -100%;}
20% {left: -100%;}
25% {left: -200%;}
30% {left: -200%;}
35% {left: -300%;}
40% {left: -300%;}
45% {left: -400%;}
50% {left: -400%;}
55% {left: -500%;}
60% {left: -500%;}
65% {left: -600%;}
70% {left: -600%;}
75% {left: -700%;}
80% {left: -700%;}
85% {left: -800%;}
90% {left: -800%;}
95% {left: -900%;}
100% {left: -900%;}
}
#slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;}
#slider figure img{width:10%;float:left;}
#slider figure{position:relative;width:1000%;margin:0;left:0;text-align:left;animation:15s slideshow infinite}
@media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}