Image sliders are the most attractive part of any website. This is an example of automatic image slider. In which images will changed automatically after 2 second, as your wise you can change the timing of slide. It is designed in HTML/CSS and JavaScript code. Which looks like as bellow.
CSS 1 2 3 4 5 6 7 8 9 | .mySlides{ display:none; width: 400px; height: 300px; } .maindiv{ text-align: center; max-width:500px } |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
<html>
<head> <title> Automatic Image Slider </title> </head> <body> <h2 class="maindiv">Automatic Slideshow</h2> <div class="maindiv"> <img class="mySlides" src="image_1.jpg" style="width:100%"> <img class="mySlides" src="image_2.jpg" style="width:100%"> <img class="mySlides" src="image_4.jpg" style="width:100%"> <img class="mySlides" src="image_5.jpg" style="width:100%"> <img class="mySlides" src="image_6.jpg" style="width:100%"> <img class="mySlides" src="image_7.jpg" style="width:100%"> <img class="mySlides" src="image_8.jpg" style="width:100%"> <img class="mySlides" src="image_9.jpg" style="width:100%"> </div> </body> </html> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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 } |
0 comments:
Post a Comment