Bootstrap 3 Carousel

Add scrolling images or text to your website with the Bootstrap carousel component.

The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Basically a scrolling marquee with user controls.

<!-- Carousel container -->
<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>
</ol>

<!-- Content -->
<div class="carousel-inner" role="listbox">

<!-- Slide 1 -->
<div class="item active">
<img src="/pix/samples/16l.jpg" alt="Sunset over beach">
</div>

<!-- Slide 2 -->
<div class="item">
<img src="/pix/samples/4l.jpg" alt="Rob Roy Glacier">
</div>

<!-- Slide 3 -->
<div class="item">
<img src="/pix/samples/15l.jpg" alt="Longtail boats at Phi Phi">
</div>

</div>

<!-- Previous/Next controls -->
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>

Explanation

To create a basic carousel, apply .carousel and .slide to an outer container (with its own ID).

For the scrollable contents, wrap all items in a .carousel-inner and give each item an .item class.

For the "indicator" controls (the little clickable circles at the bottom, center), add a list with .carousel-indicators, as well as the applicable .data-target and .data-slide-to attributes.

For the "Previous/Next" controls, use an <a> with class="left carousel-control" for the "Previous" button, and class="right carousel-control" for the "Next" button.

Also, you must apply .active to one of the slides in the carousel, otherwise the carousel won't be visible. This class allows you to set one slide as the initial slide (i.e. the starting slide).

I've also added my own styles to center the images horizontally in the carousel.

Captions

You can add captions to your slideshow by adding a <div> with the .carousel-caption class applied. This goes inside each .item.

<!-- Carousel container -->
<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>
</ol>

<!-- Content -->
<div class="carousel-inner" role="listbox">

<!-- Slide 1 -->
<div class="item active">
<img src="/pix/samples/16l.jpg" alt="Sunset over beach">
<div class="carousel-caption">
<h3>Boracay</h3>
<p>White Sand Beach.</p>
</div>
</div>

<!-- Slide 2 -->
<div class="item">
<img src="/pix/samples/4l.jpg" alt="Rob Roy Glacier">
<div class="carousel-caption">
<h3>Rob Roy Glacier</h3>
<p>You can almost touch it!</p>
</div>
</div>

<!-- Slide 3 -->
<div class="item">
<img src="/pix/samples/15l.jpg" alt="Longtail boats at Phi Phi">
<div class="carousel-caption">
<h3>Phi Phi</h3>
<p>Longtail boats at Phi Phi.</p>
</div>
</div>

</div>

<!-- Previous/Next controls -->
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>

Bootstrap 3 vs Bootstrap 4

Bootstrap 3 uses .item for each carousel item.

Bootstrap 4 uses .carousel-item for each carousel item.