title: html transition of 5 images, stop the last image
body: <p>Gooh night, I have a transition of 5 images that change automatically, I need that when I get to image 5 it stays fixed and does not repeat the transition. 
  that is to say that when the 5 images pass it remains fixed in the last Thank you</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;W3.CSS&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type"&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  &lt;style&gt;
  .mySlides {display:none;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="w3-content w3-section" style="max-width:800px"&gt;
    &lt;img class="mySlides" id="img1" src="1.jpg" style="width:100%"&gt;
    &lt;img class="mySlides" id="img2" src="2.jpg" style="width:100%"&gt;
    &lt;img class="mySlides" id="img3" src="3.jpg" style="width:100%"&gt;
    &lt;img class="mySlides" id="img4" src="4.jpg" style="width:100%"&gt;
    &lt;img class="mySlides" id="img5" src="5.jpg" style="width:100%"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var myIndex = 0;
  carousel();
  
  function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i &lt; x.length; i++) {
      x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex &gt; x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 500); // Change image every 2 seconds
  
  
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>