Generic Mobile-friendly Slider Plugin with jQuery - touchSlider

Generic Mobile-friendly Slider Plugin with jQuery - touchSlider
File Size: 10.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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

  // infinite scroll
  roll : true,

  // flexible layout
  flexible : true,

  // auto resize
  resize : false,

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

  // animation speed
  speed : 75,

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

  range : 0.15,
  page : 1,
  sidePage : false,

  // enable CSS3 transitions
  transition : true,

  // callback
  initComplete : null,

  // counter
  counter : null,

  propagation : false,

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

  // whether to use mouse
  useMouse: true,
  
});

Changelog:

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.