How to create Bootstrap 3 Carousel slider

A slider is a comon component of a website and make fully responsive slider is become very easy with help of bootstrap 3 and in 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 unic id of the page here I have used myCarousal and use class name .carousel and .slide and data-ride="carousel",

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

Example:

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

Slider Indicator

Inside the div with class name .carousel take a ordered list ol with 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 indicater of the slider no here will be 0, 1, 2 and so on according to the slider no and give class name .active which one you want to make the first slide and in the slide also you have tp 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 class name .carousel-inner and inside that take many dive gor the slider item with class name .item and which one you want to make first slider have to use .active on the item and inside thet 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 class name .carousel take a anchar tag with 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 class name .carousel take a anchar tag with 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 class name .item take a div with class name .carousel-caption and indise thet you can take heading pr paragrapg 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 sliders id (here I have used myCarousel)

Example:

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

Enable The Slider Control

to make the slider controll enable through script use the below script with the sliders id (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 thebootstrap slider , I hope the post helped you please provede your comment to make the website better and more usefull,

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.