How to add image slide show in your blogger post in 5 minutes

Back>

Example

copy the following code into your post's HTML tab, replacing the <img> src and the <h2> text.

<style>
.mySlides {
   display:none;
   position: relative;
   width: 100%; /* for IE 6 */
}

h2 {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 100%;
}
</style>


<br />
<div class="w3-content w3-section" style="max-width: 200px;">
<div class="mySlides">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitnBbsu_bTLW70HJfkGPPhYHd1uy_oEMltHKThLYRR3Lo6DoFwBQF0MFHnYD-Gut8Udd4848KN8YC_vAfVh0ir_gWMOH4tJH4EGZpV3pzTk4lSzmsiADO85taMMw-B6rW_Ppo1VaKhPbub/s320/Screen+Shot+2017-06-23+at+9.53.26+PM.png" style="width: 100%;" />
  <br />
<h2>
Set</h2>
</div>
<div class="mySlides">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvf5RaHRdkYDb4WiZXrp3R7IVu78KdCbdyFWHtDT5ljeYHO57OE6gVQE0Zj0BUfgnnaGBXSdhgbeZWeQ4xBQsYDc-VgGFk3xa2IimQPtNZvezGI73IBAreEw516XZngY4gxBx9wCB1SbB/s320/Screen+Shot+2017-06-23+at+9.56.12+PM.png" style="width: 100%;" />
  <br />
<h2>
SortedSet</h2>
</div>
<div class="mySlides">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdL9x2_XqgV9PdPT4xsU-PnH67hr8YKUiEuamFiqxNkhO5nFON_uqYil103Z-zQMIQzIEXh4DnE7Xpz5yXQJhXPsAVyHieTdSzPyNnzGGx9ari6kSytoLtF2x4zRvZC1ammT5N9vHfYBQf/s320/Screen+Shot+2017-06-23+at+10.06.55+PM.png" style="width: 100%;" />
  <br />
<h2>
List</h2>
</div>
</div>
<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, 2000); // Change image every 2 seconds
}
</script>