Open In App

How to Design Half-Page Carousel in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.
 

html




<!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 Science Portal for Geeks</b>
    </article>
</body>
 
</html>                               


Output: 
 

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari


Last Updated : 25 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads