Landing page – lesson 6


Step 1

One of the most popular Bootstrap component is Carousel. We'll take an advantage of it and use it as our Gallery.

Let's create a grid for Gallery section.


<!--Section: Gallery-->
<section id="gallery">
    
    <!-- Heading -->
    <h2 class="mb-5 font-weight-bold text-center">Gallery heading</h2>

    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-md-6 mb-4">



        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-6">



        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Gallery-->
                            

Here is nothing new for you, so we'll skip the explanation and move forward.

Step 2

Go to Carousel Docs and copy the code of Basic Example. Then paste it into the first column.

PS: If you want change carousel images and add the shadow class to .carousel-inner element. I'll do so.


<!--Grid column-->
<div class="col-md-6 mb-4">
    
    <!--Carousel Wrapper-->
    <div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
        <!--Indicators-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-1z" data-slide-to="1"></li>
            <li data-target="#carousel-example-1z" data-slide-to="2"></li>
        </ol>
        <!--/.Indicators-->
        <!--Slides-->
        <div class="carousel-inner z-depth-1-half" role="listbox">
            <!--First slide-->
            <div class="carousel-item active">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/images/84.jpg" alt="First slide">
            </div>
            <!--/First slide-->
            <!--Second slide-->
            <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/images/85.jpg" alt="Second slide">
            </div>
            <!--/Second slide-->
            <!--Third slide-->
            <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" alt="Third slide">
            </div>
            <!--/Third slide-->
        </div>
        <!--/.Slides-->
        <!--Controls-->
        <a class="carousel-control-prev" href="#carousel-example-1z" 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-1z" 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-->

</div>
<!--Grid column-->
                            

Save the file, refresh the browser and enjoy your new carousel :).


Multiple carousels

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel’s id, be sure to update the relevant controls.

Step 3

Let's play a little with carousel options.

At the beginning we'll make it to slide a bit faster.

In the script sections, at the bottom of our document, below the linked MDB files, paste the following snippet:


<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

<!-- Carousel options -->
<script>
    $('.carousel').carousel({
        interval: 200,
    })
</script>
                            

After saving the file you will noticed our Carousel became crazy. Well, it's definitely to fast. We'll change the interval value to 3000.


If you want to turn off autoplay, change the value of interval to false.

If you want to learn more about Carousel options have a look at Carousel Options Docs.

Step 4

To finish our Gallery Section we need to fill up the second column with a few additional information.

Add a following code to the second column:


<!--Grid column-->
<div class="col-md-6">
    
    <!--Excerpt-->
    <a href="" class="teal-text">
        <h6 class="pb-1"><i class="fa fa-heart"></i><strong> Lifestyle </strong></h6>
    </a>
    <h4 class="mb-3"><strong>This is title of the news</strong></h4>
    <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
        placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis
        debitis aut rerum.</p>

    <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
        placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis
        debitis aut rerum.</p>
    <p>by <a><strong>Jessica Clark</strong></a>, 26/08/2016</p>
    <a class="btn btn-primary btn-md">Read more</a>

</div>
<!--Grid column-->
                            

Similarly to the Step 1 - here is nothing new to explain. You can modify the content according to your needs and taste.


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.