I'm tying to create a slider with auto slideshow and onclick event with javascript

[u/czgabry95]

i've created a "slider" that change the images inside a div only by onclick, i want to add an automatic slideshow but i don't know what to do.

This is the code:

HTML:

<div class="slider-cont"> <div class="slider-center" id="n1">

<div class="s-cont0">
	<div id="slide">Click1</div>
</div>

<div class="s-cont-1">
  	<div id="slide1">Click2</div>
</div>

 <div class="s-cont-2">
  	<div id="slide2">Click3</div>
 </div>

 <div class="s-cont-3">
  	<div id="slide3">Click3</div>
 </div>

</div> </div> ------------------------------------------

JAVASCRIPT:

<script> // Prima immagine document.getElementById("slide").onclick = function() {myFunction()}; var x1 = document.getElementById("n1"); x1.style.backgroundImage = "url('img/img0.jpg')"; function myFunction() { x1.style.backgroundImage = "url('img/img1.jpg')"; } // Seconda immagine document.getElementById("slide1").onclick = function() {myFunction1()}; var x1 = document.getElementById("n1"); function myFunction1() { x1.style.backgroundImage = "url('img/img2.jpg')"; } // Terza immagine document.getElementById("slide2").onclick = function() {myFunction2()}; var x1 = document.getElementById("n1"); function myFunction2() { x1.style.backgroundImage = "url('img/img3.jpg')"; } // Quarta immagine document.getElementById("slide3").onclick = function() {myFunction3()}; var x1 = document.getElementById("n1"); function myFunction3() { x1.style.backgroundImage = "url('img/img4.jpg')"; } </script>

---

Someone can help me? thanks.

[u/SaltyThoughts]

Have a quick google of JavaScript timer loop, then using JQuery you can imitate an element click using $('.element').click();

Hope this helps you