How to create Bootstrap 3 Carousel slider

A slider is a common component of a website and makes a fully responsive slider becomes very easy with help of bootstrap 3 and in the bootstrap slider, you can use caption or text also, Now start Bootstrap 3 Carousel slider step by step.

Code and discussion of bootstrap 3 slider

to make a slider first take a div with a unique id of the page where I have used myCarousal and use the class name .carousel and .slide and data-ride="carousel",

Now inside that take an ordered list and a div and two anchor tag, the first div for the indicator and the second for the sliders and the anchor tag for the left and right button

Example:

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

Slider Indicator

Inside the div with the class name .carousel take an ordered list ol with the class name .carousel-indicators and inside that tale list item li with data-target="#myCarousel" here myCarousel is the id of the slider container div and then take data-slide-to="0" here the 0 is the indicator of the slider no here will be 0, 1, 2 and so on according to the slider no and give the class name .active which one you want to make the first slide and in the slide also you have to use the class name .active

Example:

<!-- 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>

Slider body:

Take a div with the class name .carousel-inner and inside that take many dive for the slider item with the class name .item and which one you want to make the first slider have to use .active on the item and inside that you have to use image item

Example:

<div class="item active">
  <img src="la.jpg" alt="Los Angeles">
</div>

Left slider indicator button:

Now inside the div with the class name .carousel take an anchor tag with the class name .left and .carousel-control and inside href give the slider id. and inside that you can use glyphicon or text of any icon.

Example:

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>

Right slider indicator button:

Now inside the div with the class name .carousel take an anchor tag with the class name .right and .carousel-control and inside href give the slider id. and inside that you can use glyphicon or text of any icon.

Example:

<a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>

Bootstrap 3 Slider with Captions

Inside the div with the class name .item take a div with the class name .carousel-caption and inside that, you can take heading pr paragraph, etc

Example:

<div class="item">
  <img src="chicago.jpg" alt="Chicago">
  <div class="carousel-caption">
    <h3>Chicago</h3>
    <p>Thank you, Chicago!</p>
  </div>
</div>

Now the full code Example:

<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="la.jpg" alt="Los Angeles">      
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">      
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">     
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</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>

Now some script used in Bootstrap 3 Slider

Activate Carousel

To make the slider active use script with the slider class name (here I have used myCarousel)

Example:

// Activate Carousel
$("#myCarousel").carousel();

Enable Carousel Indicators

To make the slider indicator enable through the script you can use the script described below with the id of the slider (here I have used myCarousel)

Example:

// Enable Carousel Indicators
$(".item").click(function(){
    $("#myCarousel").carousel(1);
});

Enable The Slider Control

to make the slider controls enable through script use the below script with the id of the slider (here I have used myCarousel)

Example:

// Enable Carousel Controls
$(".left").click(function(){
    $("#myCarousel").carousel("prev");
});

// Enable Carousel Controls
$(".left").click(function(){
    $("#myCarousel").carousel("next");
});

Sliders Options Through script

Now the below script is for some options for the Bootstrap 3 Carousel slider

.carousel("cycle");	
.carousel("pause");	
.carousel(number);	
.carousel("prev");	
.carousel("next");	

In this post Bootstrap 3 Carousel slider, we have made the bootstrap slider, I hope the post helped you please provide your comment to make the website better and more useful,

Thanks for Reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.