1. <style>
2. .mySlides{display:none}
3. .mySlides img {vertical-align:middle;width:100%}
4. .wrap-dot{text-align:center;margin-top:10px}
5. .slideshow-container{max-width:1000px;position:relative;margin:auto}
6. .slideshow-container .prev,.slideshow-container
7. .next{cursor:pointer;position:absolute;top:50%;padding:5px 15px;margin:-22px 5px 0 5px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:50%;user-select:none}
8. .slideshow-container .next{right:0}
9. .slideshow-container .prev:hover,.slideshow-container .next:hover{background-color:rgba(0,0,0,0.8)}
10. .slideshow-container .text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}
11. .wrap-dot .dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease}
12. .wrap-dot .dot.active{background-color:#00ff00;width:30px;border-radius:20px}
13. .fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
14. @-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}
15. @media only screen and (max-width:300px){.slideshow-container
16. .prev,.slideshow-container .next,.slideshow-container .text{font-size:11px}} </style>
17.  
18.  
19.  
20.  
21. <div class="slideshow-container">
22. <div class="mySlides fade">
23.   <a href='#'>
24.   <img src="https://p2.piqsels.com/preview/560/572/15/children-cute-excited-excitement.jpg"/>
25.   <div class="text">Caption Text</div>
26.   </a>
27. </div>
28.  
29. <div class="mySlides fade">
30.   <a href='#'>
31.   <img src="https://p2.piqsels.com/preview/898/399/802/people-mother-daughter-baby.jpg"/>
32.   <div class="text">Caption Two</div>
33.   </a>
34. </div>
35.  
36. <div class="mySlides fade">
37.   <a href='#'>
38.   <img src="https://p0.piqsels.com/preview/735/640/842/mother-baby-happy-smiling.jpg"/>
39.   <div class="text">Caption Three</div>
40.   </a>
41. </div>
42.  
43.   <div class="mySlides fade">
44.   <a href='#'>
45.   <img src="https://p0.piqsels.com/preview/829/443/586/children-boys-family-books.jpg"/>
46.   <div class="text">Caption Three</div>
47.   </a>
48. </div>
49. <a class="prev" onclick="prevSlide()">&#10094;</a>
50. <a class="next" onclick="showSlides()">&#10095;</a>
51. </div>
52.  
53. <div class='wrap-dot'>
54.   <span class="dot"></span>
55.   <span class="dot"></span>
56.   <span class="dot"></span>
57.   <span class="dot"></span>
58. </div>
59.  
60.  
61. <script>
62. var timeOut = 2000;
63. var slideIndex = 0;
64. var autoOn = true;
65.  
66. autoSlides();
67.  
68. function autoSlides() {
69.   timeOut = timeOut - 20;
70.   if (autoOn == true && timeOut < 0) {
71.    showSlides();
72.   }
73.   setTimeout(autoSlides, 20);
74. }
75.  
76. function prevSlide() {
77.   timeOut = 2000;
78.   var slides = document.getElementsByClassName("mySlides");
79.   var dots = document.getElementsByClassName("dot");
80.   for (i = 0; i < slides.length; i++) {
81.    slides[i].style.display = "none";
82.    dots[i].className = dots[i].className.replace(" active", "");
83.  }
84.  slideIndex--;
85.  
86.  if (slideIndex > slides.length) {
87.     slideIndex = 1
88.   }
89.   if (slideIndex == 0) {
90.     slideIndex = 4
91.   }
92.   slides[slideIndex - 1].style.display = "block";
93.   dots[slideIndex - 1].className += " active";
94.         }
95.  
96. function showSlides() {
97.   timeOut = 2000;
98.   var slides = document.getElementsByClassName("mySlides");
99.   var dots = document.getElementsByClassName("dot");
100.   for (i = 0; i < slides.length; i++) {
101.    slides[i].style.display = "none";
102.    dots[i].className = dots[i].className.replace(" active", "");
103.  }
104.  slideIndex++;
105.  
106.  if (slideIndex > slides.length) {
107.     slideIndex = 1
108.   }
109.   slides[slideIndex - 1].style.display = "block";
110.   dots[slideIndex - 1].className += " active";
111. }
112. </script>