Flexible Bootstrap Image Slider With Thumbnail Gallery - Boot-Slider

Boot-Slider is a jQuery plugin that lets you create a responsive, automatic image carousel with thumbnail navigation using Bootstrap layout system.

Features:

• Auto rotation with a progress bar.
• Infinite loop.
• Thumbnails are organized as a justified photo gallery.
• Click on the thumbnail to switch between the images within the carousel.

How to use it:

1. Load the necessary jQuery library and Bootstrap framework in the webpage.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Load the Font Awesome 4 for slider control icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Load the jQuery Boot-Slider plugin's JS and CSS files after jQuery.

<link rel="stylesheet" href="boot_slider.css">
<script src="boot_slider.js"></script>

4. Insert carousel images and thumbnails into your webpage following the html structure like this:

<div class="row" id="boot_slider">
  <div class="col-xs-12 col-lg-12" id="slider_full">
    <div class="slider_nav col-xs-12 col-lg-12">
      <p id="slider_next"><i class="fa-arrow-circle-right fa"></i></p>
      <p id="slider_prev"><i class="fa-arrow-circle-left fa"></i></p>
    </div>

    <div class="col-xs-12 col-lg-12" id="slider_full_items">
      <div class="col-xs-12 col-lg-12 slider_full_item">
        <div class="opacity"></div>
        <div class="img_large" style="background-image:url('1.jpg');">
          <p class="text-center">
            <span>Slider Text</span>
            <span class="slider_full_desc">Your Description</span>
          </p>
        </div>
      </div>
      <div class="col-xs-12 col-lg-12 slider_full_item">
        <div class="opacity"></div>
        <div class="img_large" style="background-image:url('2.jpg');">
          <p class="text-center">
            <span>Slider Text</span>
            <span class="slider_full_desc">Your Description</span>
          </p>
        </div>
      </div>
      <div class="col-xs-12 col-lg-12 slider_full_item">
        <div class="opacity"></div>
        <div class="img_large" style="background-image:url('3.jpg');">
          <p class="text-center">
            <span>Slider Text</span>
            <span class="slider_full_desc">Your Description</span>
          </p>
        </div>
      </div>
      <div class="col-xs-12 col-lg-12 slider_full_item">
        <div class="opacity"></div>
        <div class="img_large" style="background-image:url('4.jpg');">
          <p class="text-center">
            <span>Slider Text</span>
            <span class="slider_full_desc">Your Description</span>
          </p>
        </div>
      </div>
      <div class="col-xs-12 col-lg-12 slider_full_item">
        <div class="opacity"></div>
        <div class="img_large" style="background-image:url('5.jpg');">
          <p class="text-center">
            <span>Slider Text</span>
            <span class="slider_full_desc">Your Description</span>
          </p>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-lg-12" id="slider_loading"></div>
  </div>

  <div class="col-xs-12 col-lg-12" id="slider_items">
    <div class="col-xs-12 col-sm-6">
      <div class="slider_item_image" style="background-image:url('1.jpg');">
        <div class="opacity"></div>
        <p>First Slide Description</p>
      </div>
      
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="slider_item_image" style="background-image:url('2.jpg');">
        <div class="opacity"></div>
        <p>Second Description</p>
      </div>
      
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="slider_item_image" style="background-image:url('3.jpg');">
        <div class="opacity"></div>
        <p>Third Slide</p>
      </div>
      
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="slider_item_image" style="background-image:url('4.jpg');">
        <div class="opacity"></div>
        <p>Fouth Description</p>
      </div>
      
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="slider_item_image" style="background-image:url('5.jpg');">
        <div class="opacity"></div>
        <p>Fifth Slide</p>
      </div>
      
    </div>
  </div>

</div>

---

This awesome jQuery plugin is developed by Distantoff. For more Advanced Usages, please check the demo page or visit the official website.