Image Slide Show Auto with Javascript 5 Seconds

➤ CSS (Cascading Style Sheets)

<style>
  .imgHeight {
    height: 335px;
    width:100%;
    padding-top:6px;
  }
  @media screen and (max-width: 800px) {
    .imgHeight {
      height: 180px;
    }
  }
</style>

 

➤ HTML Code

<a href="https://upinsale.blogspot.com/" title="กดคลิกดูดีลนี้" target="_blank">
  <img class="mySlides imgHeight" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpeAb6XLYAbIPD_axB9uLBqnfRHd96-z5qDLX15daKNmll7iV0hzOi9fNrbNSjS7BxX2X_KfJEZKYwvyEXpHUg2h2ufxCBLhuAWhBCmDvFETf2FPuLhF03Bxc_odS03a4JtLHHbhRxKe8/w640-h237/upinsale_cover.png" style="" />
</a>

<a href="https://ipthai.blogspot.com/2020/01/wyndhamgardenirin-pattaya.html" title="กดคลิกดูดีลนี้" target="_blank">
  <img class="mySlides imgHeight" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVR1LE8qCIjRgOhaX2tYelet8ChKhFnrTk8JFq8VS9GrfXdIh1ZlZfS6tciCJW1YkrbXB0QBu4bYFiy3kZ876Y-x3S4joL8H5Uxi6Q_db_yDpVLxIYpNK5jUIvz7X2V-do73CqTlpikmU/s1600/wyndham_gargen_irin_bangsaray.jpg" style="" />
</a>

<a href="https://solarcellland.blogspot.com/2020/01/sell-8-mw-solarcell.html" title="กดคลิกดูดีลนี้" target="_blank">
  <img class="mySlides imgHeight" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGr_fJB5V0pQpvx_THwfjPXgy78ANENZwzxqjQPWFh90niBTOS2JicpsnZdN2nu1YYtvOXIX2L_X4u9P6Au0FW35H0ZUuIr7OSNohmrGCwuoW9GG4cWBYkwp7AI4_ekLVlAobJw7UHuU/s1600/%25E0%25B8%25A3%25E0%25B8%25B2%25E0%25B8%258A%25E0%25B8%259A%25E0%25B8%25B8%25E0%25B8%25A3%25E0%25B8%25B58MW.jpg" style="" />
</a>

<a href="https://poolandspathailand.blogspot.com/p/products.html" title="กดคลิกดูดีลนี้" target="_blank">
  <img class="mySlides imgHeight" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXQiBcMWoRMs7VNdkcSRkHFERGwkgW71tMt1ogBeH4kbJhRIS1CNGk2ic-L8eiCeWa740qwrf52kiBXrN5w6sFsOTLbosCYDbJ3xoj6PZGY9ucDQBDDkdTzNf7hY7YZf-vx8rtYR6v0z_/s1600/ads_01.png" style="" />
</a>

<a href="https://bangkok-ads.blogspot.com/2018/08/blog-post.html" title="กดคลิกดูดีลนี้" target="_blank">
  <img class="mySlides imgHeight" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7DeBc6bW-T6oIw5I6wMcE7PdgMsAz3ucP9_O0dZdYxcwt8RDjt8jntRQjgOywdXVOTmt38jJjtqkCdnxiskaKXtvCQ6JLoUCIB3sBY2QBMinqM6_G-7zq91FcEGne1xRGlK1MigeecJn/s1600/bangkokads_0022_3.png" style="" />
</a>

<a href="https://ngeonboran.blogspot.com/p/blog-page_13.html" title="สนใจลงโฆษณาตำแหน่งนี้">
  <img class="mySlides imgHeight" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_D7BilQ__jU3-jvDONkTyhTOcqSvQ_2jgS-8GyPFMnYQHKOPWnPn_RDeCjBh-h4WLbQ1llP8qH-8zJ1IVlyXrm2ojWd-9KAPQftnRh0wYQp1DNNDESqw6oLRAwb9eyIE2mSFSCGKsXdej/s1600/Img_0024.png" style="" />
</a>

 

➤ Javascript Code

<script>
  var myIndex = 0;
  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000); // Change image every 5 seconds
  }
</script>