Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Image Carousel

Full Page Carousel


Written 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 navbar-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?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 27

  • User avatar

    VladimirPaky

    I have problem understanding second (modified) code. How image is loaded? There is no in code.

  • User avatar

    VladimirPaky

    Oh, now I understand it is in CSS.

  • User avatar

    adlib

    I follow all above steps, but when I provide a link to the image within my project’s files following the rule: background-image: url(“/img/imageName.jpg”) ... but there is no recognizable file

  • User avatar

    Michal Szymanski

    In CSS you should define file path this way: url("../img/imageName.jpg");

  • silmasur

    Awesome!!! Thanks a lot!

  • User avatar

    Michal Szymanski

    I'm glad you find it useful :)

  • User avatar

    alexandr.revenoc

    I have some images I want to add from my PC but I don't know why I cna't do that? I change CSS path, change HTML path but nothing happens. I try short path and long path, again... nothing. Here is my file's path: F:\HTML\Material Design for Bootstrap\Landing Carousel Video\images\02.jpg What should I change in html and what in CSS url()?

  • User avatar

    alexandr.revenoc

    I've add a path in CSS: background-image: url("../images/image.jpg"); The image is displayed, but I don't understant whu the video doesn't display. The video file is located in the same folder. But that path doesn't work for video. My video is .mov.

  • User avatar

    Michal Szymanski

    alexandr.revenoc what exactly have you written for your video path?

  • User avatar

    oboohma

    Great stuff, but a question: For each slide you’re creating new content. Is it also possible to have the slides as a background without rebuilding the content?

  • User avatar

    oboohma

    Figured it out already, carousel-caption below the slides wrapper does the trick. New question: how to hide the existing carousel-indicators and a carousel-caption (when placed below the slides wrapper) below the navbar on scrolling?

  • User avatar

    Michal Szymanski

    Oboohma, if you want to hide carousel-indicators just remove it from the markup. The same with the caption.

  • User avatar

    oboohma

    Hi Michal, I do not want to hide them in general, I would only like them to hide below the navbar on scrolling down the page (like the left and right carousel ‘arrow’ controls). For example, when you open up the preview and scroll down you’ll see that the carousel indicators move over, on top of the navbar. I would like have the navbar on top instead of the controls. (You might need to decrease the browser height size first to have enough scroll space available in this preview)

  • User avatar

    James

    Awesome. Working perfectly .This is what I have been looking for close to 4 months.

  • Jameel Dawan Evans

    I'm trying to implement a full page carousel into a design with a sidenav. What's the best way to accomplish this?

  • User avatar

    Marta Szymanska

    Add sidenav code from documentation: http://mdbootstrap.com/javascript/sidenav/ to your full page carousel file. You can also add skins to sidenav and whole layout: http://mdbootstrap.com/css/skins/

  • Jameel Dawan Evans

    it didn't work for me for some reason. I'll keep trying.

  • User avatar

    Marta Szymanska

    What version of MDB do you use?

  • Jameel Dawan Evans

    I'm using the most current version of MDB. I would add the HTML, CSS and nothing would render in the slide area. I cant get it.

  • User avatar

    Kamil Paciepnik

    Jameel, please write to my e-mail k.paciepnik@mdbootstrap.com enclosing your code.

  • User avatar

    Luk

    Hello, is this works with bootstrap 3?

  • User avatar

    Kamil Paciepnik

    Hi Luk, unfortunately this carousel does not work with MDB 3. But try to use this - click.

  • User avatar

    Steve

    Hey, on small screen (mobile device, portrait mode) the image is no longer centred and only the far left is displayed. Is there anyway to keep the background image focused on the centre?

  • User avatar

    Marta Szymanska

    Hello, here you can find an answer: https://mdbootstrap.com/forums/topic/full-image-carousel-background-images-not-responsive/

  • User avatar

    Md. Ashiqur

    Why its not changing automatically slide ??

  • User avatar

    Kamil Paciepnik

    Hi Md. Ashiqur, please write to my email and share me your code - k.paciepnik@mdbootstrap.com.

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.