<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style> .mySlides {display:none;} </style> <body> <div class="w3-content w3-section" style="max-width:234px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/photos/2013-08-28-chilukuru/image-1.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/photos/2014-08-17/2014-08-17 19.25.54.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/photos/2014-12-02/7289_o.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/photos/2ndAnniversaryphotos/DSC01856.JPG" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/photos/2ndAnniversaryphotos/DSC01857.JPG" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2015-02-13-hyd/Satkaram.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2016-04-10-Delhi/5.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2016-04-10-Delhi/poty-8.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2016-04-10-Delhi/poty-9.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2016-10-swamy/swamyji-Avishkarana.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2016-10-swamy/Z-amritananda-swamyji.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2016-nov/12-App.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2016-nov/19-App.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2017/10.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2017/14.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2017/23.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2017/31.jpg" style=max-width:123px; max-height:128px"; > <img class="mySlides" src="http://telugubhagavatam.org/meetings_media/2015-09-11-Miyapur/IMG_20150911_201402.jpg" style=max-width:123px; max-height:128px"; > </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> </body> </html> </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> </body> </html>