Generic Mobile-friendly Slider Plugin with jQuery - touchSlider

touchSlider is a simple, flexible jQuery plugin for creating a responsive, touch-enabled slider which supports any types of html elements.

Main features:

• Multiple items per one slide.
• Custom animations.
• Carousel mode.
• Supports both drag and touch swipe events.
• Auto rolls back to the first slide when you reach the last one.
• Auto resizes based on the child elements.
• Custom pagination and navigation.

See Also:

• Best Carousel Plugins In jQuery/JavaScript/CSS

Basic usage:

1. Create a list of html elements and the wrap it 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 at the end of the document.

<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>

4. Load the jQuery.event.drag library for drag support 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 allow 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,
  
});

Changelog:

v1.6.10 (2020-09-17)

• Bugfix

v1.6.9 (2019-11-25)

• Bugfix

v1.6.8 (2019-10-06)

• Improved link handling.

v1.6.7 (2019-09-25)

• Improved link handling.

v1.6.6 (2019-09-05)

• Added more callbacks.

v1.6.4 (2019-08-07)

• Fixed touchmove position

v1.6.3 (2019-07-22)

• Fixed issues when there are no items

v1.6.2 (2019-07-18)

• Bugfixed

2019-06-18

• Apply aria-hidden attribute to hidden slides.

2019-05-27

• Bugfixed

2019-05-25

• Added fade mode option

2019-04-21

• Bugfix

2019-02-28

• Bugfix

2018-09-07

• Bugfix

2018-08-12

• v1.4.0: Fixed breakpoints

2018-04-09

• v1.3.2

2018-02-28

• Added 'useMouse' option.

2018-02-13

• Improvement.

2017-12-19

• Improve autoplay

2017-10-30

• JS update

2017-07-06

• JS update

2017-01-11

• Fixed animations.

2016-12-28

• Fixed for IE.

2016-12-16

• Fix mouse drag error in Chrome

2016-08-29

• JS update

2016-06-06

• v1.1.5

2016-02-16

• added autoplay play / pause functionalities.

2016-02-09

• bugfix

---

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