<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<title>Image Slider</title>

<style>
.carousel-item img{
    height: 500px;
    object-fit: cover;
}
</style>
</head>
<body>

<div class="container mt-5">

    <div id="mySlider" class="carousel slide" data-bs-ride="carousel">

        <!-- Indicators -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#mySlider" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#mySlider" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#mySlider" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#mySlider" data-bs-slide-to="3"></button>
        </div>

        <!-- Slides -->
        <div class="carousel-inner">

            <div class="carousel-item active">
                <img src="./image.webp" class="d-block w-100">
            </div>

            <div class="carousel-item">
                <img src="./eyJwYXRoIjoiYWR5ZW5cL2ZpbGVcL0dSQ3NTaHNvSHhqTlZiSEdUOFV6LmpwZyJ9_adyen_k9TvVLbT7piuwHTKvL9O6Gi-VuLwWfpIxypUaKg9E6I.webp" class="d-block w-100">
            </div>

            <div class="carousel-item">
                <img src="./eyJwYXRoIjoiYWR5ZW5cL2ZpbGVcL1g3c0M4bUVCckRVUTZhMjJHQWdwLmpwZyJ9_adyen_tzCmjgap3OaLpuJMflC64es55PVBcsVXPl7Ec03TwAQ.webp" class="d-block w-100">
            </div>

            <div class="carousel-item">
                <img src="./eyJwYXRoIjoiYWR5ZW5cL2ZpbGVcLzhlNlZtaWpnSFY0WkVmNXBKeXJ1LnBuZyJ9_adyen_QyAW252ULwCc62zDdCLjUtkzpGShdayXn5xnNEh1YTE.webp" class="d-block w-100">
            </div>

        </div>

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#mySlider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>

        <button class="carousel-control-next" type="button" data-bs-target="#mySlider" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>

    </div>

</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
