HTML reset copy

<div class="bax"> <div class="bax1 bax2"> <div class="bax3">1 / 4</div> <img src="../../../../netbax_files/1.png" style="width:100%"> <div class="bax4">Enter Text One</div> </div> <div class="bax1 bax2"> <div class="bax3">2 / 4</div> <img src="../../../../netbax_files/2.png" style="width:100%"> <div class="bax4">Enter Text Two</div> </div> <div class="bax1 bax2"> <div class="bax3">3 / 4</div> <img src="../../../../netbax_files/3.png" style="width:100%"> <div class="bax4">Enter Text Three</div> </div> <div class="bax1 bax2"> <div class="bax3">4 / 4</div> <img src="../../../../netbax_files/4.png" style="width:100%"> <div class="bax4">Enter Text Four</div> </div> </div> <br> <div style="text-align:center"> <span class="bax5"></span> <span class="bax5"></span> <span class="bax5"></span> <span class="bax5"></span> </div>

CSS reset copy

* {box-sizing: border-box;} body {font-family: Verdana, sans-serif;} .bax1 {display: none;} img {vertical-align: middle;} .bax { max-width: 1000px; position: relative; margin: auto; } .bax4 { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } .bax3 { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } .bax5 { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .bax6 { background-color: #66FF00; } .bax2 { -webkit-animation-name: bax2; -webkit-animation-duration: 1.5s; animation-name: bax2; animation-duration: 1.5s; } @-webkit-keyframes bax2 { from {opacity: .4} to {opacity: 1} } @keyframes bax2 { from {opacity: .4} to {opacity: 1} } @media only screen and (max-width: 300px) { .bax4 {font-size: 11px} }

Js JAVASCRIPT reset copy

var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("bax1"); var dots = document.getElementsByClassName("bax5"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" bax6", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " bax6"; setTimeout(showSlides, 2000); // Change image every 2 seconds }