Cellular First Content material Slider – ItemSlide.js

ItemSlide.js is a versatile, responsive carousel/slider JavaScript plugin that permits to scroll/swipe via a set of components utilizing mouse drag or contact gestures.

Fundamental Utilization:

1. Embody the ItemSlide.js script in your doc.

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

2. Add your content material to the slider utilizing Html unordered checklist.

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

3. Apply CSS kinds to the slider.

#scrolling {
  place:fastened;
  high:42%;
  background: #8601AF;
  peak: 58%;
  width: 100%;
  overflow: hidden;
}

ul {
  /*Add if you wish to disable the choice of choosing the textual content whereas sliding*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
  place: absolute;
  /*high:10%;*/
  margin-top:4vh;
  peak: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;
  peak: 100%;
  colour: #8601AF;
  font-weight: 300;
  text-align: heart;
  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);
  remodel: scale(0.95);
}

.itemslide-active {
  /*utilized to present energetic merchandise*/
  -webkit-transform:  scale(1);
  -ms-transform:  scale(1);
  -moz-transform:  scale(1);
  remodel: scale(1);
}

4. Initialize the content material slider with default choices.

var itemslide;
window.addEventListener("load", () => {
  var ingredient = doc.querySelector("#scrolling ul");
  itemslide = new Itemslide(ingredient, {
    // choices right here
  });
});

5. Choices and defaults.

// period of swipe animation
period: 350,

// swiping sensitivity
swipe_sensitivity: 150,

// disable swiping and panning
disable_slide: false,

// disable click on to slip
disable_clicktoslide: false,

// disable the automated calculation of width (in order that you could possibly do it manually) 
disable_autowidth: false,

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

// begin slide
begin: 0,

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

// will be additionally thought-about as panning sensitivity
pan_threshold: 0.3, // precentage of slide width

// set this to true if you would like the width of the slides to be the width of the mother or father of ul
parent_width: false,

// allow the swipe out function - allows swiping gadgets out of the carousel
swipe_out: false, 

// restricts the actions to the borders as an alternative of the center
left_sided: false,

6. Public strategies.

• getActiveIndex(): get present energetic slide index
• getCurrentPos(): get present place of carousel (pixels)
• nextSlide(): goes to subsequent slide
• previousSlide(): goes to earlier slide
• gotoSlide(i): goes to a selected slide by index
• reload(): recalculates width and heart object
• addSlide(information): provides ultimately of the carousel a brand new merchandise
• removeSlide(index): removes a selected slide by index

8. Occasions.

• carouselChangePos: when the place of the slider is modified
• carouselPan: when person pans
• carouselChangeActiveIndex: when the present energetic merchandise has modified
• carouselSwipeOut: when person swipes out a slide (if swipe_out is enabled)
• carouselClickSlide: when clicking/tapping a slide

Changelog:

2024-10-01

• Repair override class names on li bug

2024-02-25

• Refactor variables to all use camelCase

2024-02-25

• Refactor to make code extra flat

v1.6.0 (2020-06-20)

• Mounted bug of a number of sliders with totally different choices

v1.5.0 (2020-03-08)

• Mounted bug of a number of sliders with totally different choices

2017-03-24

2015-02-08

2015-02-07

• Added new swipe out function.
• Mounted minor bug.
• Added bower.
• Mounted bug and added swipeout occasion.

2014-12-22

2014-12-18

2014-12-14

• Improved springy panning on edges and cleaned code.

2014-12-12

• Mounted vertical scroll bug

2014-12-03

• Mounted occasion triggering bug

2014-11-27

• Improved code effectivity. Format modifications.

2014-11-23

2014-11-22

• improved springy panning when out of edges

2014-11-21

2014-11-20

• Modified sliding mechanic for extra pure sliding. 
• Minor bug fixes.

2014-11-18

2014-11-17

2014-11-11

• Bug fixes and minor code modifications

2014-11-08

2014-11-03

• Mounted lag on firefox, now works easy on all main browers.

2014-11-01

• Reverted again to transform3d, bug repair

2014-10-31

• Modified movement technic for a extra constant movement and for cross browser assist

2014-10-29

• Mounted a minor mistake
• Added a brand new choice

2014-10-24

• Few format modifications
• cleaner code
• small repair

2014-10-18

• Added mousewheel functionality (non-compulsory plugin) and stuck a bug
• Modified scrolling route

2014-10-16

• Mounted a difficulty with the clicking to scroll for that added a small dependency examine readme for particulars

2014-10-15

• Mounted a serious bug that brought about an inconsisitent period while you slide quick

2014-10-15

• Now you possibly can apply itemslide on a couple of html object!

2014-10-13

• fastened small situation of final slide not showing in some display screen sizes
• added an occasion fastened some strategies

This superior jQuery plugin is developed by nir9. For extra Superior Usages, please examine the demo web page or go to the official web site.