Monday, October 26, 2020

Image Slider Using HTML CSS and Javascript

 

<!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)">&#10094</span>
<span class="next" onclick="plusSlides(1)">&#10095</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