Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Full Page Carousel

by Michal Szymanski,

Final result preview
Live preview

In this lesson, we are going to focus on the creating carousel. That's why we will copy-paste the rest of the code into our project without detailed explanation.

If you don't understand something, read the previous tutorials first.

Paste the following code to your index.html file, immediate below tag opening <body> tag:


<body>
    
<!--Navbar-->
<nav class="navbar navbar-dark fixed-top scrolling-navbar">

    <!-- Collapse button-->
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
        <i class="fa fa-bars"></i>
    </button>

    <div class="container">

        <!--Collapse content-->
        <div class="collapse navbar-toggleable-xs" id="collapseEx">
            <!--Navbar Brand-->
            <a class="navbar-brand" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">MDB</a>
            <!--Links-->
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
            <!--Search form-->
            <form class="form-inline">
                <input class="form-control" type="text" placeholder="Search">
            </form>
        </div>
        <!--/.Collapse content-->

    </div>

</nav>
<!--/.Navbar-->

<!--Carousel Wrapper-->

<!--/.Carousel Wrapper-->

<!--Footer-->
<footer class="page-footer center-on-small-only">

    <!--Footer Links-->
    <div class="container-fluid">
        <div class="row">

            <!--First column-->
            <div class="col-md-3 offset-md-1">
                <h5 class="title">ABOUT MATERIAL DESIGN</h5>
                <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>

                <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p>
            </div>
            <!--/.First column-->

            <hr class="hidden-md-up">

            <!--Second column-->
            <div class="col-md-2 offset-md-1">
                <h5 class="title">First column</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Second column-->

            <hr class="hidden-md-up">

            <!--Third column-->
            <div class="col-md-2">
                <h5 class="title">Second column</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Third column-->

            <hr class="hidden-md-up">

            <!--Fourth column-->
            <div class="col-md-2">
                <h5 class="title">Third column</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Fourth column-->

        </div>
    </div>
    <!--/.Footer Links-->

    <hr>

    <!--Call to action-->
    <div class="call-to-action">
        <h4>Material Design for Bootstrap</h4>
        <ul>
            <li>
                <h5>Get our UI KIT for free</h5></li>
            <li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-danger">Sign up!</a></li>
            <li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li>
        </ul>
    </div>
    <!--/.Call to action-->

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2015 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->

Then open a file style.css inside your CSS folder.

Paste the following code to the style.css:



.navbar {
    background-color: transparent;
}

.scrolling-navbar {
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
}

.top-nav-collapse {
    background-color: #1C2331;
}

footer.page-footer {
    background-color: #1C2331;
    margin-top: 0;
}

@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #1C2331;
    }
}

The code above creates a basic structure for our website. Now we can focus on the carousel.

Go to CAROUSEL section in MDB documentation and grab the code of Carousel with Caption. Place it between the comments <!--Carousel Wrapper-->


<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-2" data-slide-to="1"></li>
        <li data-target="#carousel-example-2" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->

    <!--Slides-->
    <div class="carousel-inner" role="listbox">
        <!--First slide-->
        <div class="carousel-item active">
            <!--Mask color-->
            <div class="view hm-black-light">
                <img src="https://mdbootstrap.com/images/slides/slide%20(11).jpg" class="img-fluid" alt="">
                <div class="full-bg-img">
                </div>
            </div>
            <!--Caption-->
            <div class="carousel-caption">
                <div class="animated fadeInDown">
                    <h3 class="h3-responsive">Light mask</h3>
                    <p>Secondary text</p>
                </div>
            </div>
            <!--Caption-->
        </div>
        <!--/First slide-->

        <!--Second slide-->
        <div class="carousel-item">
            <!--Mask color-->
            <div class="view hm-black-strong">
                <img src="https://mdbootstrap.com/images/slides/slide%20(15).jpg" class="img-fluid" alt="">
                <div class="full-bg-img">
                </div>
            </div>
            <!--Caption-->
            <div class="carousel-caption">
                <div class="animated fadeInDown">
                    <h3 class="h3-responsive">Strong mask</h3>
                    <p>Secondary text</p>
                </div>
            </div>
            <!--Caption-->
        </div>
        <!--/Second slide-->

        <!--Third slide-->
        <div class="carousel-item">
            <!--Mask color-->
            <div class="view hm-black-slight">
                <img src="https://mdbootstrap.com/images/slides/slide%20(13).jpg" class="img-fluid" alt="">
                <div class="full-bg-img">
                </div>
            </div>
            <!--Caption-->
            <div class="carousel-caption">
                <div class="animated fadeInDown">
                    <h3 class="h3-responsive">Super light mask</h3>
                    <p>Secondary text</p>
                </div>
            </div>
            <!--Caption-->
        </div>
        <!--/Third slide-->
    </div>
    <!--/.Slides-->

    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-1" 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="#carousel-example-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

Save the file and refresh the browser. Our carousel is ready.

However, there are a few drawbacks.

1. The height of the carousel depends on the height of the image. Right now all of the pictures are the same height, but what will happen if you put the image with a different size?

Try it. Change the URL of the first image to:

https://mdbootstrap.com/images/regular/nature/img%20(1).jpg

Now you can see that our carousel is "jumping" from one size to another during the slide.

2. Our carousel doesn't fill the 100% of available space. Depending on the size of image and screen of the device we use, it's more or less than 100%. And we want it to be always equal.

3. The caption (carousel text or other content) and arrows aren't exactly in the middle.


To solve these problems we need to make a few modifications in our carousel.

Replace the code of the current carousel with the code below:


<!--Carousel Wrapper-->
<div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-1" data-slide-to="1"></li>
        <li data-target="#carousel-example-1" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->

    <!--Slides-->
    <div class="carousel-inner" role="listbox">

        <!--First slide-->
        <div class="carousel-item active">
            <!--Mask-->
            <div class="view hm-black-light">
                <div class="full-bg-img flex-center">
                    <ul class="animated fadeInUp col-md-12">
                        <li>
                            <h1 class="h1-responsive flex-item">Material Design for Bootstrap 4</h1>
                        </li>
                        <li>
                            <p class="flex-item">The most powerful and free UI KIT for Bootstrap</p>
                        </li>
                        <li>
                            <a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg flex-item">Sign up!</a>
                        </li>
                        <li>
                            <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg flex-item">Learn more</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--/.Mask-->
        </div>
        <!--/.First slide-->

        <!--Second slide -->
        <div class="carousel-item">
            <!--Mask-->
            <div class="view hm-black-light">
                <div class="full-bg-img flex-center">
                    <ul class="animated fadeInUp col-md-12">
                        <li>
                            <h1 class="h1-responsive">Lots of tutorials at your disposal</h1>
                        </li>
                        <li>
                            <p>And all of them are FREE!</p>
                        </li>
                        <li>
                            <a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary btn-lg">Start learning</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--/.Mask-->
        </div>
        <!--/.Second slide -->

        <!--Third slide-->
        <div class="carousel-item">
            <!--Mask-->
            <div class="view hm-black-light">
                <div class="full-bg-img flex-center">
                    <ul class="animated fadeInUp col-md-12">
                        <li>
                            <h1 class="h1-responsive">Visit our support forum</h1></li>
                        <li>
                            <p>Our community can help you with any question</p>
                        </li>
                        <li>
                            <a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Support forum</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--/.Mask-->
        </div>
        <!--/.Third slide-->
    </div>
    <!--/.Slides-->

    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-1" 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="#carousel-example-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

When you save the file and refresh webpage you'll see that carousel has disappeared.

Don't worry, this is what we wanted to achieve. Now it's time for a little CSS magic.

Go to your style.css file and paste the following code:


/* Necessary for full page carousel*/

html,
body,
.view {
    height: 100%;
}

/* Carousel*/

.carousel,
.carousel-item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.carousel-item:nth-child(1) {
    background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(54).jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item:nth-child(2) {
    background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(4).jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item:nth-child(3) {
    background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(3).jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

Save the file and take a look at your browser. Our carousel is ready. It fills all available space and the images fit perfectly.

Try to resize your browser. You will see that images in the carousel automatically adjusts to the screen. Also, the caption (we've added buttons) and arrows are exactly in the middle (although we have to improve a few things).

We've achieved all we wanted.

But how does it work? Let me explain in few points:

1. The answer is easy - we've removed images from index.html and put it as a background of .carousel-item elements by using CSS. Because we've set a height of .item to be a 100% of available space, images will adjust to it (no matter what is the size of the image, it will always fit).

2. nth-child(1), nth-child(2), nth-child(3) refers to the slides numbers.

3. We also have to set a height: 100% to each parent element of the carousel (html, body and .view).

4. In the html code of our Carousel, we use a Mask - we learned about this construction in the previous tutorial. Thanks to that we can adjust a darkness of our image to make the Caption (text and buttons) more visible.

5. We also use a class .flex-center to align the caption exactly in the middle of the screen. We are using a Flex Box. You will learn more about it in the next lessons.

6. If you look closer at our current carousel code, you will notice we've also used a class .animated together with the animation class. That gives a nice animation to our caption when switching slides. If you didn't read a previous tutorial about animations, you can learn more about it in the ANIMATIONS section of MDB documentation.


Here is one more thing to improve. Paste the code below to style.css :


/*Caption*/

.flex-center {
    color: #fff;
}

@media (min-width: 776px) {
    .carousel .view ul li {
        display: inline;
    }
    .carousel .view .full-bg-img ul li .flex-item {
        margin-bottom: 1.5rem;
    }
}

That makes our caption white (which is a definitely better idea than black caption on the dark background).

We also make a small fix for the caption displayed on the screens smaller than 776px. Thanks to that it will be always perfectly aligned.


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


User avatar

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst.

Comments 39

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more