Carousel (slider / gallery)


Step 1

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

Let's create a grid for the 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-->

    

There is nothing new in term, so we'll skip the explanation and move forward.

Step 2

Go to Carousel Docs and copy the code for the Carousel with indicators. Then paste it into the first column.

PS: If you want you can change any of the carousel images or 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" role="listbox">
      <!--First slide-->
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).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/Slides/img%20(129).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/Slides/img%20(70).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.

Note: Add .carousel-fade to the .carousel element to animate slides with a fade transition instead of a slide.


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, please be sure to update the relevant controls.

Step 3

Let's play a little with carousel options.

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

In the SCRIPTS section, 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 notice our Carousel has become crazy. Well, it's definitely too fast. We'll therefore change the interval value to 3000.


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

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

Step 4

To finish our Gallery Section we need to fill up the second column with a few additional pieces of 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 - there is nothing new to explain here. You can modify the content according to your needs and taste.


Rate this lesson

Previous lesson 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.
Sign up to follow your progress and get additional benefits