HTML Tutorial

Bootstrap Carousel

Bootstrap Tutorial » Bootstrap Carousel

How it works

There are many plugins to create totally free jQuery slides to rotate elements as if it were a loop. But if the web application uses the Bootstrap framework, we will not need an additional jQuery plugin to create an element slide like a carousel. Bootstrap JS Carousel provides you an easy way to implement a carousel on a web page.

In this tutorial, we will show you how to create an image carousel with Bootstrap. Also, using this sample code, you will be able to extend Bootstrap's carousel functionality and create different types of sliders.

Before we start creating our carousel, we are going to include the Bootstrap library and the jQuery library.

How To Create a Carousel with BS - example

With controls

Adding in the previous and next controls:

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>How To Create a Carousel with BS - example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>How To Create a Carousel with BS - example</h2> 

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

  <!-- Indicators -->

  <ol class="carousel-indicators">

  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

  <li data-target="#myCarousel" data-slide-to="1"></li>

  <li data-target="#myCarousel" data-slide-to="2"></li>

</ol>
 <!-- Wrapper for slides -->

  <div class="carousel-inner">

  <div class="item active">

  <img src="https://media.istockphoto.com/photos/villefranche-sur-mer-in-evening-picture-id1145618475?k=6&m=1145618475&s=612x612&w=0&h=u6mv9zLy6WWdxnGxJ4i3bYOFQYJtxjmnkvgVoaGqf_U=" alt="villefranche-sur-mer" style="width:100%;">

</div>
 <div class="item">

  <img src="https://previews.123rf.com/images/belitas/belitas1605/belitas160500042/56962740-beautiful-butterfly-and-nice-flowers-spring-landscape.jpg" alt="beautiful-butterfly" style="width:100%;">

  </div>

  

  <div class="item">

  <img src="https://thumbs.dreamstime.com/b/french-garden-nong-nooch-tropical-botanical-garden-gardenat-sunrise-pattaya-thailand-78205730.jpg" alt="french-garden" style="width:100%;">

  </div>

</div>
 <!-- Left and right controls -->

  <a class="left carousel-control" href="#myCarousel" data-slide="prev">

  <span class="glyphicon glyphicon-chevron-left"></span>

  <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#myCarousel" data-slide="next">

  <span class="glyphicon glyphicon-chevron-right"></span>

  <span class="sr-only">Next</span>

  </a>

  </div>

</div>
</body>

  </html>

Add Captions to Slides ( with text ant titles) - example

Optional sizes

Add captions to your slides easily with the .carousel-caption element within any .carousel-item.
They can be easily hidden on smaller viewports, as shown below, with optional display utilities.
We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

The following example creates a very basic carousel and add captions to each of the images.

Example:

<!DOCTYPE html>

    <html lang="en">

    <head>

  <title>Bootstrap with text Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
  <div class="container">

  <h2>Bootstrap with title and text Example</h2>

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

  <!-- Indicators -->

  <ol class="carousel-indicators">

  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

  <li data-target="#myCarousel" data-slide-to="1"></li>

  <li data-target="#myCarousel" data-slide-to="2"></li>

  </ol>
 <!-- Wrapper for slides -->

  <div class="carousel-inner">
   <div class="item active">

  <img src="https://media.istockphoto.com/photos/villefranche-sur-mer-in-evening-picture-id1145618475?k=6&m=1145618475&s=612x612&w=0&h=u6mv9zLy6WWdxnGxJ4i3bYOFQYJtxjmnkvgVoaGqf_U=" alt="villefranche sur mer" style="width:100%;">

  <div class="carousel-caption">

  <h3>Villefranche sur me</h3>

  <p>villefranche-sur-mer-in-evening-picture</p>

  </div>

  </div>
   <div class="item">

  <img src="https://previews.123rf.com/images/belitas/belitas1605/belitas160500042/56962740-beautiful-butterfly-and-nice-flowers-spring-landscape.jpg" alt="beautiful-butterfly"" style="width:100%;">

  <div class="carousel-caption">

  <h3>beautiful butterfly</h3>

  <p>beautiful-butterfly-and-nice-flowers-spring-landscape</p>

  </div>

  </div>

  

  <div class="item">

  <img src="https://thumbs.dreamstime.com/b/french-garden-nong-nooch-tropical-botanical-garden-gardenat-sunrise-pattaya-thailand-78205730.jpg" alt="french-garden" style="width:100%;">

  <div class="carousel-caption">

  <h3>french garden</h3>

  <p>/french-garden-nong-nooch-tropical-botanical-garden</p>

  </div>

  </div>

  

</div>
   <!-- Left and right controls -->

  <a class="left carousel-control" href="#myCarousel" data-slide="prev">

  <span class="glyphicon glyphicon-chevron-left"></span>

  <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#myCarousel" data-slide="next">

  <span class="glyphicon glyphicon-chevron-right"></span>

  <span class="sr-only">Next</span>

  </a>

  </div>

</div>
  </body>

    </html>

BS Carousel multiple items, not working, examples, image size, fade, with text, swipe, slider, tutorial, image

BS Carousel multiple items, not working, examples, image size, fade, with text, swipe, slider, tutorial, image
Bootstrap Carousel - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.