Mobile First Content Slider with jQuery and Hammer.js - ItemSlide.js

Mobile First Content Slider with jQuery and Hammer.js - ItemSlide.js
File Size: 75 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ItemSlide.js is a flexible, responsive carousel/slider jQuery plugin which allows to scroll/swipe through a set of elements using mouse drag or touch gestures based on hammer.js. Animated with requestAnimationFrame technique.

Basic Usage:

1. Include the latest jQuery library and hammer.js in your web page.

<script src="dependencies/hammer.min.js"></script>
<script src="dependencies/jquery.min.js"></script>

2. Include the itemslide.js script after jQuery library.

<script src="src/itemslide.js"></script>

3. Add your content to the slider using Html unordered list.

<ul>
  <li> Slide 1 </li>
  <li> Slide 2 </li>
  <li> Slide 3 </li>
  ...
</ul>

4. You can add some anchor elements to scroll to target slide using gotoSlide() method.

<span onclick="$('ul').gotoSlide(0)">Slide 1</span>
<span onclick="$('ul').gotoSlide(1)">Slide 2</span>
<span onclick="$('ul').gotoSlide(2)">Slide 3</span>
...

5. Initialize the content slider with default options.

$(document).ready(function (){
  $("ul").initslide();
});

6. Options and defaults.

// duration of swipe animation
duration: 250,

// swiping sensitivity
swipe_sensitivity: 250,

// disable swiping and panning
disable_slide: false,

// disable click to slide
disable_clicktoslide: false,

// disable the automatic calculation of width (so that you could do it manually) 
disable_autowidth: false,

// disable the sliding triggered by mousewheel scrolling
disable_scroll: false,

// start slide
start: 0,

// set true for "one slide per swipe" navigation
one_item: false, 

// can be also considered as panning sensitivity
pan_threshold: 0.3, // precentage of slide width

// set this to true if you want the width of the slides to be the width of the parent of ul
parent_width: false,

// enable the swipe out feature - enables swiping items out of the carousel
swipe_out: false, 

// restricts the movements to the borders instead of the middle
left_sided: false,

// infinite loop
infinite: false

7. Public methods.

  • getActiveIndex(): get current active slide index
  • getCurrentPos(): get current position of carousel (pixels)
  • next(): goes to next slide
  • previous(): goes to previous slide
  • gotoSlide(i): goes to a specific slide by index
  • reload(): recalculates width and center object
  • addSlide(data): adds in the end of the carousel a new item
  • removeSlide(index): removes a specific slide by index

8. Events.

carousel.on('changePos', function(e) {
  // when the position of the carousel is changed
});

carousel.on('pan', function(e) {
  // when user pans
});

carousel.on('changeActiveIndex', function(e) {
  // when the current active item has changed
});

carousel.on('swipeout', function(e, slide) {
  // when user swipes out a slide (if swipe_out is enabled)
});

carousel.on('clickSlide', function(e, slide) {
  // when clicking/tapping a slide
});

Changelog:

v1.5.0 (2020-03-08)

  • Fixed bug of multiple sliders with different options

2017-03-24

  • Bugfixed

2015-02-08

  • Fixed bugs on ie

2015-02-07

  • Added new swipe out feature.
  • Fixed minor bug.
  • Added bower.
  • Fixed bug and added swipeout event.

2014-12-22

  • More natural sliding.

2014-12-18

  • Fixed bug

2014-12-14

  • Improved springy panning on edges and cleaned code.

2014-12-12

  • Fixed vertical scroll bug

2014-12-03

  • Fixed event triggering bug

2014-11-27

  • Improved code efficiency. Layout changes.

2014-11-23

  • minor fixes.

2014-11-22

  • improved springy panning when out of edges

2014-11-21

  • Fixed some ios bugs

2014-11-20

  • Changed sliding mechanic for more natural sliding. 
  • Minor bug fixes.

2014-11-18

  • Minor fix.

2014-11-17

  • Bug Fix

2014-11-11

  • Bug fixes and minor code changes

2014-11-08

  • Fixed some major bugs.

2014-11-03

  • Fixed lag on firefox, now works smooth on all major browers.

2014-11-01

  • Reverted back to transform3d, bug fix

2014-10-31

  • Changed motion technic for a more consistent motion and for cross browser support

2014-10-29

  • Fixed a minor mistake
  • Added a new option

2014-10-24

  • Few layout changes
  • cleaner code
  • small fix

2014-10-18

  • Added mousewheel capability (optional plugin) and fixed a bug
  • Changed scrolling direction

2014-10-16

  • Fixed an issue with the click to scroll for that added a small dependency check readme for details

2014-10-15

  • Fixed a major bug that caused an inconsisitent duration when you slide fast

2014-10-15

  • Now you can apply itemslide on more than one html object!

2014-10-13

  • fixed small issue of last slide not appearing in some screen sizes
  • added an event fixed some methods

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