Responsive Customizable Content Slider Using jQuery Plugin

The touch slider is a simple and flexible jQuery plugin to create a responsive touch slider that supports any type of HTML element and makes it easy to create touch scroll bars.

Main Features:

Flicking navigation plugin based on jQuery
There are no restrictions on choosing coding elements and are designed for beginners to use with ease.
Multiple application is possible according to CSS Selector
Available via Cloud in Computer Browser (Included as default v1.3.0)
Support jQuery 1.7+, IE7 +

How to make use of it:

1. Create a list of HTML components and the wrap it right into a DIV container.

<div id="touchSlider">
  <ul>
    <li> Content 1 </li>
    <li> content 2 </li>
    <li> content 3 </li>
    ...
  </ul>
</div>

2. Apply custom CSS classes to the slider.

#touchSlider {
  width: 100%;
  height: 150px;
  margin: 0 auto;
  background: #ccc;
  position: relative;
  overflow: hidden;
}

#touchSlider ul {
  width: 99999px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#touchSlider ul li {
  float: left;
  width: 100%;
  height: 150px;
  background: #9C9;
  font-size: 14px;
  color: #fff;
}

3. Load jQuery library and the jQuery touchSlider plugin on the finish of the doc.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="jquery.touchSlider.js"></script><br type="_moz">

4. Load the jQuery.event.drag library for drag assists on desktop.

<script src="//cdn.jsdelivr.net/jquery.event.drag/2.2/jquery.event.drag.min.js"></script>

5. Active the container slider with default options.

$("#touchSlider").touchSlider();

6. Add a slide counter and custom prev / next navigation arrows to the slider.

$("#touchSlider").touchSlider({
  btn_prev : $("#touchSlider").next().find(".btn_prev"),
  btn_next : $("#touchSlider").next().find(".btn_next"),
  counter : function (e) {
    $("#count").html("current : " + e.current + ", total : " + e.total);
  }
});

7. Config the plugin to permit more than 5 items in one slide.

$("#touchSlider").touchSlider({
  view : 5,
  btn_prev : $("#touchSlider").next().find(".btn_prev"),
  btn_next : $("#touchSlider").next().find(".btn_next"),
  counter : function (e) {
    $("#count").html("current : " + e.current + ", total : " + e.total);
  }
});

8. All the configuration options with default values.

$("#touchSlider").touchSlider({

  // whether to use mouse
  useMouse: true,

  // or 'fade'
  mode: 'swipe'

  // infinite scroll
  roll: true,

  // flexible layout
  flexible: true,

  // auto resize
  resize: false,

  // custom controls
  btn_prev: null,
  btn_next: null,
  controls: true,

  // animation speed
  speed: 75,

  // how many items in one slide
  view: 1,

  // space between slides
  gap: 0,

  // distance to trigger the sliding
  range: 0.15,

  // show page controls
  paging: true,

  // init page
  page: 1,

  // slides pages
  sidePage: false,

  // enable CSS3 transitions
  transition: true,

  // callback
  initComplete: null,

  // autoplay settings
  autoplay: {
    enable: false,
    pauseHover: true,
    addHoverTarget: "",
    interval: 3500
  },

  // an object containing settings for different screens
  breakpoints: null,

  // called after init
  initComplete: null,

  // called after destroy
  destroyComplete: null

  // called after passing the slider
  counter: null,
  
});

Mobile-friendly Slider Plugin with jQuery, Touch Slider Plugin/Github