Bootstrap Carousel

What is a Bootsrap Carousel?

A Bootstrap Carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
Lots of websites use them for image galleries, to showcase specific products — especially on a homepage or landing page — or to jazz up an otherwise text-heavy website. You’ll see them used for latest news or blog posts, to display additional images for a holiday location or commerce product and more.

Example of Carousel code

The following example shows how to create a basic carousel with indicators and controls. Feel free to give it a try! Remember to add your own image files to the code.

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

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

<div class="carousel-inner">
   				<div class="carousel-item active">
    					<img src="img1.jpg" alt="title">
    				</div>
    
    			<div class="carousel-item">
      					<img src="img2.jpg" alt="title">
    				</div>
    
    			<div class="carousel-item">
     					<img src="img3.jpg" alt="title">
    				</div>
 			 </div>

<a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  	<a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

Monster comic books

An old collection of monster comic books

Masks

A collection of scary vampire masks

Figurines of creatures

A collection of small figurine monsters

Add text to your Carousel

With this code you can add a caption to your picture in your carousel. Note: The carousel caption will need to be in the carousel-item tag.