Auto-image slider with your smart phone(HTML and javaScript)

Auto-image slider with your smart phone(HTML and javaScript)

August 04, 2020

Creating an auto image slider, you need the knowledge of HTML and javaScript......

But if no knowledge about, you which to create like this....infact you can just copy and the codes down below .

Here we go......into the journey.

Html : Using HTML you have place some image with HTML and class them for javaScript to execute.

<body>
<div class="mySlides">
<img src="Url or name of the image" width="100%" height="400px"/>
</div>
<div class="mySlides">
<img src="Url or name of the image "width="100%" height="400px"/>
</div>
<div class="mySlides">
<img src="Url or next of the image" width="100%" height="400px"/>
</div>

Now it's time to add javascript.

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display= "none";
}
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 4000);
}
</script>

That's all.....copy and paste on your text editor.

Thanks for reading....above there is my video...on this you can sit back and be more practical, by watching that.

Comments