How to Use the Carousel to Add an Image Slideshow to Your Startup Template

The carousel is a slideshow for cycling through a series of content—images, text, or custom markup. It includes support for previous and next controls as well as indicators that identify the position of the currently active slide in the list.

Startup templates support two carousels out-of-the-box: the Bootstrap Carousel and the Slick Carousel. This article mainly covers how to work with the Bootstrap carousel. We briefly look at the Slick Carousel, but we don’t go into detail. It has been thoroughly documented on its homepage, we feel that that is sufficient for you to get started with the carousel.

Carousel with Only Slides

You can have a carousel that only displays the slides with no indicators or previous/next controls, like the one shown above.

Below is the code for the above carousel:

<!-- Carousel with Only Slides -->

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block" src="a.png" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="b.png" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="c.png" alt="Third slide">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The Bootstrap carousel fills the full width of the container it is placed in. The below section of the code takes care of the sizing and positioning of the container that holds the carousel in the Startup template, it has nothing to do with the carousel, so we won’t cover it here. Check our classes guide for an explanation of what the classes do.

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        ...
      </div>
    </div>
  </div>
</section>

The carousel markup is enclosed in the following div:

<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">

We give the carousel an id of carouselSlidesOnly. For this type of carousel (with slides only), an id isn’t necessary, especially if the carousel is the only carousel on the page. You have to set a unique id on the element with a carousel class for carousels that have previous/next controls as well as those that have indicators. If you are also using multiple carousels on the same webpage, then each one must have a unique id.

The carousel and slide classes are required on the carousel element. The data-ride="carousel" attribute marks a carousel as animating starting at page load (i.e. it will start to automatically cycle through the slides on page load).

The carousel has several elements with the carousel-item class. These hold the slide content that the carousel will cycle through. You have to add the active class to one of the slides, otherwise, the carousel won’t be visible. As the carousel cycles through the different slides, it will add the active class to the forefront slide and remove it from the slide that was previously in this position.

We have three slides in our carousel, each holding an image. We add a d-block class to each of the images to prevent default browser image alignment. d-block sets the image’s display property to block.

The carousel automatically cycles through slides, but there is no way for the user to go back and forth on the slides. Next, let’s add previous and next controls to the carousel that will enable the user to do this.

Carousel with Previous and Next Controls

The above carousel has controls on its left and right that enable the user to view the previous or next slide by clicking on them.

Here is the code for the carousel:

<!-- Carousel with Previous and Next Controls -->

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div id="carouselControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block" src="a.png" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="b.png" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="c.png" alt="Third slide">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselControls" 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="#carouselControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

The code looks similar to the previous carousel’s code, except for the following:

<a class="carousel-control-prev" href="#carouselControls" 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="#carouselControls" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

This adds and wires up the Previous and Next controls. The controls have a href that matches the id of the .carousel element. They also have the data-slide attribute which alters the slide position relative to its current position. Its value can be either prev or next. You can also skip to a particular slide by using the data-slide-to attribute and passing it the index of the slide (e.g. data-slide-to="1"). The index starts from 0.

Carousel with Indicators

Next, let’s add indicators to the carousel that show the number of slides in the carousel, as well as the position of the currently active slide.

Here’s the code for the carousel:

<!-- Carousel with Indicators -->

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselIndicators" data-slide-to="1"></li>
            <li data-target="#carouselIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block" src="a.png" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="b.png" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block" src="c.png" alt="Third slide">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselIndicators" 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="#carouselIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

The carousel has the following code which adds the indicators:

<ol class="carousel-indicators">
  <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselIndicators" data-slide-to="1"></li>
  <li data-target="#carouselIndicators" data-slide-to="2"></li>
</ol>

We add three list items, which Bootstrap takes care of styling and positioning. Each indicator element must have a data-target attribute that matches the id of the .carousel element. The indicators also have a data-slide-to attribute with a value of an index of the slide it will make active when clicked. With this, you can move to a particular slide by clicking on its indicator. Just as with carousel-item, we add the .active class to one of the indicators and as the carousel cycles through the slides, the class will be added to the forefront indicator and removed from the previously active one.

Carousel with Captions

You might want to add some text to each of the slides in your carousel, as shown above. Below, you can see the code that does this.

<!-- Carousel with Captions -->

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div id="carouselCaptions" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselCaptions" data-slide-to="1"></li>
            <li data-target="#carouselCaptions" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block" src="a.png" alt="First slide">
              <div class="carousel-caption d-none d-md-block">
                <h5>Slide 1 Label</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block" src="b.png" alt="Second slide">
              <div class="carousel-caption d-none d-md-block">
                <h5>Slide 2 Label</h5>
                <p>Aliquam ac hendrerit dolor. Donec fringilla et libero ornare tempor.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block" src="c.png" alt="Third slide">
              <div class="carousel-caption d-none d-md-block">
                <h5>Slide 3 Label</h5>
                <p>Proin nibh eros, mattis eget risus vel, sollicitudin condimentum tellus.</p>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselCaptions" 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="#carouselCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

The code modifies each .carousel-item as shown below:

<div class="carousel-item active">
  <img class="d-block" src="a.png" alt="First slide">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide 1 Label</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

We add a carousel-caption class to the element that holds the text that will be used as the caption for that particular slide. Each caption has d-none d-md-block classes that make the caption only appear on medium screen devices and upwards (i.e. ≥768px). This is totally a style choice, you can decide to have the caption appearing on all screen sizes by removing the classes.

Carousel With a Fade Transition

So far, our carousels have been cycling through the slides with a sliding transition where the currently active slide slides out of view and the next slide slides into view. We can change the transitioning animation from a slide to a fade-in as shown above. Here is the code to do that:

<!-- Carousel with Fade Transition -->

<section class="pt-105 pb-45">
  <div class="container px-xl-0">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselFade" data-slide-to="0" class="active"></li>
            <li data-target="#carouselFade" data-slide-to="1"></li>
            <li data-target="#carouselFade" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block" src="a.png" alt="First slide">
              <div class="carousel-caption d-none d-md-block">
                <h5>Slide 1 Label</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block" src="b.png" alt="Second slide">
              <div class="carousel-caption d-none d-md-block">
                <h5>Slide 2 Label</h5>
                <p>Aliquam ac hendrerit dolor. Donec fringilla et libero ornare tempor.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block" src="c.png" alt="Third slide">
              <div class="carousel-caption d-none d-md-block">
                <h5>Slide 3 Label</h5>
                <p>Proin nibh eros, mattis eget risus vel, sollicitudin condimentum tellus.</p>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselFade" 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="#carouselFade" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

We add a carousel-fade class to the carousel to animate slides with a fade transition instead of a slide.

<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">

Customizing the Carousel

You can customize the behavior of the carousel either with JavaScript or by adding attributes to the carousel markup.

To do it with an attribute, append the option name to the data- attribute, e.g. data-interval="2000":

<div class="carousel-item" data-interval="2000">
  <img class="d-block" src="b.png" alt="Second slide">
</div>

To do it via JavaScript, call the carousel manually with $('.carousel').carousel(), passing in an options object:

$('.carousel').carousel({
  interval: 2000
})

Here is a list of available options:

• interval: This sets the amount of time, in milliseconds, to delay before automatically cycling an item. By default, it is set to 5000. It can also have the value false. When set to false, the carousel will not automatically cycle.
• keyboard: This determines whether the carousel should react to keyboard events. By default, it is set to true. It can either have a value of true or false.
• pause: Determines if the carousel cycling will pause when the user hovers over it. If set to hover, the carousel pauses on mouseenter and resumes cycling on mouseleave. If set to false, hovering over the carousel won’t pause it. By default, it’s set to hover. On touch-enabled devices, when set to hover, cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming.
• slide: This accepts the values prev or next, and alters the slide position relative to its current position. It can also take the value false, which when used on a control, will not move the slide position when the control is clicked. Its default value is false.
• ride: This can have a value of either carousel or false. When set to carousel, the carousel will start animating on page load, and when set to false, the carousel will only start to cycle after the user manually cycles the first item. By default, it is set to false.
• wrap: This determines whether the carousel should cycle continuously or have hard stops. It takes the values true or false. By default, it is set to true
• touch: This determines whether the carousel should support left/right swipe interactions on touchscreen devices. It takes the values true or false. By default, it is set to true

The Slick Carousel

The Bootstrap carousel might be sufficient for you, but if you want to use another carousel that offers much more in terms of styling and functionality, then consider using the Slick Carousel. Below are two examples of carousels that you can create with Slick. For more examples, please check the documentation.

Single slide carousel:

Multiple slides carousel:

The Startup template already supports the Slick Carousel out-of-the-box. We’ve already imported the Slick JavaScript and CSS files, so you can go ahead and add your carousel markup and JavaScript code. The Slick documentation is thorough and sufficient to get you going. If you get stuck, don’t hesitate to get in touch with us.