Skip to main content
jquery-slider-plugins

Set your Image Slider Using Bootstrap

Hi, I am describing you how to set or edit Image Slider using Bootstrap or without using bootstrap. In this tutorial, I am also describing how can you Set the third party Image Slider in your Front page. You can use Simple Image Slider template from the Bootstrap and apply the template code in your front Page.

How to Set Image Slider.

  • Download Image slider from the Bootstrap’s official website.
  • After the downloading the files you have to open the Index.html in your web browser. the web browser may be Google chrome, firefox or the Internet Explorer.
  • Include all the file related to the Slider in Header Section. See here…
  • Copy the code and paste it where you want to use the Image Slider and properly link all related files in your page.

For Example

<div id="carousel-example-generic" class="carousel slide" 
data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

%d bloggers like this: