forum

home / developersection / forums / caption slide carousel with bootstrap

Ask Question

Caption slide carousel with Bootstrap

Ethan Karla 385 28-Jul-2021

How to create a Caption slides Carousel with Bootstrap?

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

03-Aug-2021

To create a Caption slides Carousel with Bootstrap library see the below example: 

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <title>Bootstrap Dropdown</title>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</head>

<body>

    <div class='container d-flex justify-content-center flex-column'>

        <div id='carouselExampleCaptions' class='carousel slide' data-bs-ride='carousel'>

            <div class='carousel-indicators'>

                <button type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide-to='0' class='active' aria-current='true' aria-label='Slide 1'></button>

                <button type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide-to='1' aria-label='Slide 2'></button>

                <button type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide-to='2' aria-label='Slide 3'></button>

            </div>

            <div class='carousel-inner'>

                <div class='carousel-item active'>

                    <img src='https://source.unsplash.com/1600x900/?nature,water' class='d-block w-100' alt='...'>

                    <div class='carousel-caption d-none d-md-block'>

                        <h5>Nature Lover</h5>

                        <p>Nature lovers will find the area a veritable paradise, with rocky coves and sandy beaches attracting many seabirds.</p>

                    </div>

                </div>

                <div class='carousel-item'>

                    <img src='https://source.unsplash.com/1600x900/?apple,iphone' class='d-block w-100' alt='...'>

                    <div class='carousel-caption d-none d-md-block'>

                        <h5>Apple iPhone</h5>

                        <p>In some ways, the iPhone is more like a palmtop computer than a cellular phone.</p>

                    </div>

                </div>

                <div class='carousel-item'>

                    <img src='https://source.unsplash.com/1600x900/?laptop,macbook' class='d-block w-100' alt='...'>

                    <div class='carousel-caption d-none d-md-block'>

                        <h5>Apple Mac</h5>

                        <p>The Macintosh is a family of personal computers designed, manufactured, and sold by Apple Inc. since January 1984.</p>

                    </div>

                </div>

            </div>

            <button class='carousel-control-prev' type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide='prev'>

                <span class='carousel-control-prev-icon' aria-hidden='true'></span>

                <span class='visually-hidden'>Previous</span>

            </button>

            <button class='carousel-control-next' type='button' data-bs-target='#carouselExampleCaptions' data-bs-slide='next'>

                <span class='carousel-control-next-icon' aria-hidden='true'></span>

                <span class='visually-hidden'>Next</span>

            </button>

        </div>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy