Mobile-friendly Carousel / Slideshow Plugin With jQuery And Bootstrap

Bootstrap Touch Slider is a jQuery plugin used to enhance the default Bootstrap carousel component with additional features like touch events support, slide/fade animations and CSS3 animated slide text.

How to use it:

1. Make sure you first have jQuery library and Bootstrap framework installed in the web project.

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

2. Load the jQuery touchSwipe plugin in the document.

<script src="/path/to/jquery.touchSwipe.min.js"></script>

3. Load the Animate.css in the head section that will provide the CSS3 animations for your slide text.

<link href="/path/to/animate.min.css" rel="stylesheet">

4. You might also need to load the Font Awesome for the navigation icons.

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

5. You might also need to load the Font Awesome for the navigation icons. If you want to change '#bootstrap-touch-slider' id then you have to change 'Carousel-indicators' and 'Carousel-Control' '#bootstrap-touch-slider' slide as well.

<div id="bootstrap-touch-slider" class="carousel bs-slider fade control-round indicators-line" 
     data-ride="carousel" 
     data-pause="hover" 
     data-interval="false" >

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
    <li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
    <li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper For Slides -->
  <div class="carousel-inner" role="listbox">

    <!-- Third Slide -->
    <div class="item active">

      <!-- Slide Background -->
      <img src="1.jpg" alt="Bootstrap Touch Slider"  class="slide-image"/>
      <div class="bs-slider-overlay"></div>

      <div class="container">
        <div class="row">
          <!-- Slide Text Layer -->
          <div class="slide-text slide_style_left">
              <h1 data-animation="animated zoomInRight">Slide Text</h1>
          </div>
        </div>
      </div>
    </div>
    <!-- End of Slide -->

    <!-- Second Slide -->
     <div class="item active">

      <!-- Slide Background -->
      <img src="2.jpg" alt="Bootstrap Touch Slider"  class="slide-image"/>
      <div class="bs-slider-overlay"></div>

      <div class="container">
        <div class="row">
          <!-- Slide Text Layer -->
          <div class="slide-text slide_style_left">
              <h1 data-animation="animated zoomInRight">Slide Text</h1>
          </div>
        </div>
      </div>
    </div>
    <!-- End of Slide -->

    <!-- Third Slide -->
    <div class="item active">

      <!-- Slide Background -->
      <img src="3.jpg" alt="Bootstrap Touch Slider"  class="slide-image"/>
      <div class="bs-slider-overlay"></div>

      <div class="container">
        <div class="row">
          <!-- Slide Text Layer -->
          <div class="slide-text slide_style_left">
              <h1 data-animation="animated zoomInRight">Slide Text</h1>
          </div>
        </div>
      </div>
    </div>
    <!-- End of Slide -->


  </div><!-- End of Wrapper For Slides -->

  <!-- Left Control -->
  <a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
    <span class="fa fa-angle-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <!-- Right Control -->
  <a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
    <span class="fa fa-angle-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

6. Active the plugin and done.

$('#bootstrap-touch-slider').bsTouchSlider();

---

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