Site icon DataFlair

Bootstrap Carousel

Expert-led Courses: Transform Your Career – Enroll Now

Program 1

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="demo" class="carousel slide" data-bs-ride="carousel">

            <div class="carousel-indicators">
                <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                <!--<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>-->
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="C:\\Users\\Lenovo\\Downloads\\bird.jpg" style="width:100%;height:40%">
                </div>
                <div class="carousel-item">
                    <img src="C:\\Users\\Lenovo\\Downloads\\bird.jpg" style="width:100%;height:40%">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>

        </div>
    </body>
</html>

 

Exit mobile version