This is a javaScript function to create slide show. here is less design , you can design it as your own. please share if there is any better way of implement it.

I wanted to create a basic image slider without using any javascript or jquery library but using only vanilla javascript. And here is the result.

Just by Changing the style.display property i have created this.

Basic Explanation

Let me explain my js functions

function showSlides(n) {
    var i ;
    var slides =document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");

    if (n > slides.length){currentIndex= 1}
    if (n < 1){currentIndex= slides.length}

    for (i=0 ; i< slides.length; i++){
        slides[i].style.display = "none";
      }
      
    for (i=0 ; i < dots.length ; i++)
      {
          dots[i].className = dots[i].className.replace(" active", "")
      }
  
      slides[currentIndex- 1].style.display = "block";
      dots[currentIndex- 1].className += " active";
  }

In this function using slides and dot i am collecting the HTML COLLECTION of two div mySlides fade and dot. After that based on the value of n i have determined the current index.

Then based on current index i have changed the property of two div's .

Other Functions are just sending currentIndex (send from the html page ) to the main function.

i will be vary glad if this helps you anyway.