How to Design Half-Page Carousel in Bootstrap ?

It can be included in your webpage using “bootstrap.js” or “bootstrap.min.js”. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. Bootstrap Carousel is image slide show for your webpage to make it look more attractive. But the normal Bootstrap Carousel took the whole webpage if the used image dimensions are huge, there is one more problem in Bootstrap Carousel, that it will zoom in when the page will get a bigger screen. To handle this kind of situation, here in this article, we will design a Bootstrap Carousel that will take only half of the page.

Below example illustrates theabove approach:

Example: In this example, we will change the value of three Classes CSS property those are carousel-inner, item.active and item img. It will fixed the height of the carousel for the page.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href=
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <script src=
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
    </script>
  
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous">
    </script>
    <style>
        article { 
            margin: 15px; 
        
        h1 {
            color: green;
        }
        .carousel-inner {
            height: 310px;
        }
          
        .item.active {
            height: 310px!important;
        }
          
        .item img {
            object-fit: cover;
            height: 100%!important;
        }
    </style>
</head>
  
<body>
  
    <div class="container-fluid">
        <div id="carousel1"
            class="carousel slide carousel-fade"
            data-ride="carousel" style="height:50vh">
          
            <!--Indicators-->
            <ol class="carousel-indicators">
                <li data-target="#carousel1"
                    data-slide-to="0"
                    class="active"></li>
                <li data-target="#carousel1"
                    data-slide-to="1"></li>
                <li data-target="#carousel1"
                    data-slide-to="2"></li>
            </ol>
      
            <!--Slides-->
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="view">
                        <img src=
                            alt="First slide">
                        <div class="mask rgba-black-light"></div>
                    </div>
                </div>
                <div class="carousel-item">
                  
                    <!-- Slideer 1 -->
                    <div class="view">
                        <img src=
                            alt="Second slide">
                        <div class="mask rgba-black-strong"></div>
                    </div>
                </div>
                <div class="carousel-item">
                  
                    <!-- Slideer 2 -->
                    <div class="view">
                        <img src=
                            alt="Third slide">
                        <div class="mask rgba-black-slight"></div>
                    </div>
                </div>
            </div>
          
            <!-- Slideer 3 -->
            <a class="carousel-control-prev"
            href="#carousel1" role="button"
            data-slide="prev">
                <span class="carousel-control-prev-icon"
                    aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next"
            href="#carousel1" role="button"
            data-slide="next">
                <span class="carousel-control-next-icon"
                    aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <article>
        <h1>GeekesforGeeks</h1>
        <b>A Computer Sicence Portal for Geeks</b>
    </article>
</body>
  
</html>                                

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.