title: Slideshow on click image
body: <p>Right now I have a regular slideshow that goes to the next picture when you click on the > button. </p>
  
  <p>I'm searching for a code that makes the image jump to the next image when you click on the image itself, so a slideshow without buttons. </p>
  
  <p>Can someone help me with this? I can't seem to find a solid code for this. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slideIndex = [1,1,1];
  var slideId = ["mySlides1", "mySlides2", "mySlides3"]
  showDivs(1, 0);
  showDivs(1, 1);
  showDivs(1, 2);
  
  function plusDivs(n, no) {
    showDivs(slideIndex[no] += n, no);
  }
  
  function showDivs(n, no) {
    var i;
    var x = document.getElementsByClassName(slideId[no]);
    if (n &gt; x.length) {slideIndex[no] = 1}
    if (n &lt; 1) {slideIndex[no] = x.length}
    for (i = 0; i &lt; x.length; i++) {
      x[i].style.display = "none";
    }
    x[slideIndex[no]-1].style.display = "block";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="w3-content w3-display-container"&gt;
    &lt;img class="mySlides1" src="images01/designed1.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed2.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed3.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed4.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed5.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed6.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed7.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed8.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed9.jpg" style="width:50%"&gt;
    &lt;img class="mySlides1" src="images01/designed10.jpg" style="width:50%"&gt;
    &lt;button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)"&gt;&amp;#10094;&lt;/button&gt;
    &lt;button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)"&gt;&amp;#10095;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>