How to make a slider with the help of Bootstrap classes?

0 votes
78 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

How to make a slider with the help of Bootstrap classes?    

1 Answer

0 votes
Ravi Vishwakarma answered 18-Aug-2021 by Ravi Vishwakarma

The Bootstrap Carousel or sider is a flexible, responsive path. It is used to add the slider to your web page. It is very responsive and flexible. With this, you can also add Images, Iframes, Videos, and any other type of content.

<!doctype html>

<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Slider demo</title>
</head>
<body>
    <div class='container mt-3 '>
        <h1 class='text-center'>Slider demo</h1>
        <hr />
        <div class='carousel slide bg-dark text-white' id='slider' data-bs-ride='carousel'>
            <div class='carousel-indicators'>
                <button type='button' data-bs-target='#slider' data-bs-slide-to='0' class='active' aria-current='true' aria-label='Slide 1'></button>
                <button type='button' data-bs-target='#slider' data-bs-slide-to='1' aria-label='Slide 2'></button>
                <button type='button' data-bs-target='#slider' data-bs-slide-to='2' aria-label='Slide 3'></button>
            </div>
            <div class='carousel-inner text-center'>
                <div class='carousel-item active'>
                    <img src='logo.png' class='d-block w-100 h-50 ' alt='slide one' />
                </div>
                <div class='carousel-item'>
                    <img src='cat.png' class='d-block w-100' alt='slide two'>
                </div>
                <div class='carousel-item'>
                    <img src='design.png' class='d-block w-100' alt='slide three'>
                </div>
            </div>
            <button class='carousel-control-prev' type='button' data-bs-target='#slider' 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='#slider' data-bs-slide='next'>
                <span class='carousel-control-next-icon' aria-hidden='true'></span>
                <span class='visually-hidden'>Next</span>
            </button>
        </div>
    </div>
    <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>
</body>
</html>

Output

How to make a slider with the help of Bootstrap classes?