Mobile First Content Slider - ItemSlide.js

ItemSlide.js is a flexible, responsive carousel/slider JavaScript plugin that allows to scroll/swipe through a set of elements using mouse drag or touch gestures.

Basic Usage:

1. Include the ItemSlide.js script in your document.

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

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

<ul id="scrolling">
  <li> Slide 1 </li>
  <li> Slide 2 </li>
  <li> Slide 3 </li>
  ...
</ul>

3. Apply CSS styles to the slider.

#scrolling {
  position:fixed;
  top:42%;
  background: #8601AF;
  height: 58%;
  width: 100%;
  overflow: hidden;
}

ul {
  /*Add if you want to disable the option of selecting the text while sliding*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
  position: absolute;
  /*top:10%;*/
  margin-top:4vh;
  height:80%;
  list-style-type: none;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

li {
  font-size:8vmin;/*cool*/
  float: left;
  width:55vw;
  max-width: 750px;
  height: 100%;
  color: #8601AF;
  font-weight: 300;
  text-align: center;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -o-border-radius: 30px;
  -moz-border-radius: 30px;
  cursor: pointer;
  background: #FFF;
  -webkit-transform:  scale(0.95);
  -ms-transform:  scale(0.95);
  -moz-transform:  scale(0.95);
  transform: scale(0.95);
}

.itemslide-active {
  /*applied to current active item*/
  -webkit-transform:  scale(1);
  -ms-transform:  scale(1);
  -moz-transform:  scale(1);
  transform: scale(1);
}

4. Initialize the content slider with default options.

var itemslide;
window.addEventListener("load", () => {
  var element = document.querySelector("#scrolling ul");
  itemslide = new Itemslide(element, {
    // options here
  });
});

5. Options and defaults.

// duration of swipe animation
duration: 350,

// swiping sensitivity
swipe_sensitivity: 150,

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

6. Public methods.

• getActiveIndex(): get current active slide index
• getCurrentPos(): get current position of carousel (pixels)
• nextSlide(): goes to next slide
• previousSlide(): 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.

• carouselChangePos: when the position of the slider is changed
• carouselPan: when user pans
• carouselChangeActiveIndex: when the current active item has changed
• carouselSwipeOut: when user swipes out a slide (if swipe_out is enabled)
• carouselClickSlide: when clicking/tapping a slide

Changelog:

2024-02-25

• Refactor to make code more flat

v1.6.0 (2020-06-20)

• Fixed bug of multiple sliders with different options

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 nir9. For more Advanced Usages, please check the demo page or visit the official website.