| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Slider</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>Image Slider</h1> | |
| </div> | |
| <div class="slideshow-container"> | |
| <div class="myslides fade"> | |
| <div class="numberText">1/6</div> | |
| <img src="images/athena.jpg" alt="" style="width:100%"> | |
| <div class="text">Athena</div> | |
| </div> | |
| <div class="myslides fade"> | |
| <div class="numberText">2/6</div> | |
| <img src="images/apollo.jpg" alt="" style="width:100%"> | |
| <div class="text">apollo</div> | |
| </div> | |
| <div class="myslides fade"> | |
| <div class="numberText">3/6</div> | |
| <img src="images/hades.jpg" alt="" style="width:100%"> | |
| <div class="text">hades</div> | |
| </div> | |
| <div class="myslides fade"> | |
| <div class="numberText">4/6</div> | |
| <img src="images/zeus.jpg" alt="" style="width:100%"> | |
| <div class="text">zeus</div> | |
| </div> | |
| <div class="myslides fade"> | |
| <div class="numberText">5/6</div> | |
| <img src="images/aphrodite.jpg" alt="" style="width:100%"> | |
| <div class="text">Aphrodite</div> | |
| </div> | |
| <div class="myslides fade"> | |
| <div class="numberText">6/6</div> | |
| <img src="images/poseiden.jpg" alt="" style="width:100%"> | |
| <div class="text">poseiden</div> | |
| </div> | |
| <span class="prev" onclick="plusSlides(-1)">❮</span> | |
| <span class="next" onclick="plusSlides(1)">❯</span> | |
| <br> | |
| <div style="text-align: center;"> | |
| <span class="dot" onclick="currentSlide(1)"></span> | |
| <span class="dot" onclick="currentSlide(2)"></span> | |
| <span class="dot" onclick="currentSlide(3)"></span> | |
| <span class="dot" onclick="currentSlide(4)"></span> | |
| <span class="dot" onclick="currentSlide(5)"></span> | |
| <span class="dot" onclick="currentSlide(6)"></span> | |
| </div> | |
| </div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
No comments:
Post a Comment