100-project-100-days-website/100_projects/48-create-animated-image-carousel/index.html

36 lines
1.1 KiB
HTML
Raw Normal View History

2023-04-10 01:41:23 +03:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Document</title>
</head>
<body>
<section aria-label="Newest Photos">
<div class="carousel" data-carousel>
<button class="carousel-button prev" data-carousel-button="prev">&#8926;</button>
<button class="carousel-button next" data-carousel-button="next">&#8927;</button>
<ul data-slides>
<li class="slide" data-active>
<img src="imgs/01.jpg" alt="Nature Image #1">
</li>
<li class="slide">
<img src="imgs/02.jpg" alt="Nature Image #2">
</li>
<li class="slide">
<img src="imgs/03.jpg" alt="Nature Image #3">
</li>
<li class="slide">
<img src="imgs/04.jpg" alt="Nature Image #4">
</li>
<li class="slide">
<img src="imgs/05.jpg" alt="Nature Image #5">
</li>
</ul>
</div>
</section>
</body>
</html>