Generic Mobile-friendly Slider Plugin with jQuery - touchSlider

File Size: 12.2 KB
Views Total: 9820
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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

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.