Animated Touch-friendly Slider With jQuery And CSS3 - Touch Slider

A fully responsive, mobile-friendly, cross-platform jQuery slider carousel plugin that features CSS3 animations, custom breakpoints, thumbnail preview on hover and more.

Basic usage:

1. Download the plugin and insert the JavaScript file slider.min.js after jQuery library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/slider.min.js"></script>

2. Include the hammer.js library that helps you add support for touch gestures to the slider.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/slider.min.js"></script>

3. Add your own content and images as backgrounds to the slider.

<div class="o-sliderContainer" id="pbSliderWrap0" style="margin-top:0;">
  <div class="o-slider" id="pbSlider0">
    <div class="o-slider--item" style="background-image: url(1.jpg)">
      <div class="o-slider-textWrap">
        <h1 class="o-slider-title">This is a title</h1>
        <span class="a-divider"></span>
        <h2 class="o-slider-subTitle">This is a sub title</h2>
        <span class="a-divider"></span>
        <p class="o-slider-paragraph">This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p>
      </div>
    </div>
    <div class="o-slider--item" style="background-image: url(2.jpg)">
      <div class="o-slider-textWrap">
        <h1 class="o-slider-title">This is a title</h1>
        <span class="a-divider"></span>
        <h2 class="o-slider-subTitle">This is a sub title</h2>
        <span class="a-divider"></span>
        <p class="o-slider-paragraph">This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p>
      </div>
    </div>
    <div class="o-slider--item" style="background-image: url(3.jpg)">
      <div class="o-slider-textWrap">
        <h1 class="o-slider-title">This is a title</h1>
        <span class="a-divider"></span>
        <h2 class="o-slider-subTitle">This is a sub title</h2>
        <span class="a-divider"></span>
        <p class="o-slider-paragraph">This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph This is a sub paragraph </p>
      </div>
    </div>
    ...
  </div>
</div>

4. Initialize the slider plugin with default options.

$('#pbSlider0').pbTouchSlider();

5. Customize the slider plugin by overriding the default options as shown below:

$('#pbSlider0').pbTouchSlider({

  // Assign a unique ID to the div.o-sliderContainer
  slider_Wrap : '', 

  // Single Item
  slider_Item : '.o-slider--item', 

  // Single Item width in  percentage %
  slider_Item_Width : 90, 

  // To dragIt or not to dragIt
  slider_Drag : true, 

  // Wanna see dots or not?
  slider_Dots : { 
    class :'.o-slider-pagination',
    enabled : true,
    preview : true,
  },

  // Wanna see Arrows or not?
  slider_Arrows : { 
    class :'.o-slider-arrows',
    enabled : true
  },

  // Percentage of  dragX before go to next/prev slider
  slider_Threshold : 25, 

  // Animation speed
  slider_Speed : 1000,

  // see http://cubic-bezier.com/
  slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)',  

  // Kind of media queries ( can add more if you know how to do it :D and if you need )
  slider_Breakpoints : { 
    default : {
      height : 500 //  height on desktop
    },
    tablet : {
      height : 400, // height on tablet
      media : 1024 // tablet breakpoint
    },
    smartphone : {
      height : 300, // height on smartphone
      media : 768 // smartphone breakpoint
    }
  }
  
}};

Change log:

2017-11-28

• fullwidth & height add

2017-11-24

• JS & CSS fix

2017-10-24

• JS & CSS fix

2017-08-25

• html fix

2017-07-17

• css fix

2017-06-29

• added preview support

2017-06-05

• Fixed for IE9

---

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