Tiny Versatile Carousel / Slider Plugin For jQuery - slide.js

Just another jQuery slider plugin which helps create any types of content carousels or sliders you can imagine: image carousels, vertical fullpage sliders, automatic slideshows and many more.

Features:

• Horizontal or vertical scrolling.
• Autoplay
• Multiple instances on one page.
• Multiple items on one slide.
• Infinite looping.
• Fullpage scrolling with mouse wheel.
• Image lazy loading.

How to use it:

1. Add your slide items together with the pagination and next/prev navigation into the slider.

<div class="slide-wrapper">
  <ul class="clearfix">
    <li><div class="orange">Slide 1</div></li>
    <li><div class="green">Slide 2</div></li>
    <li><div class="blue">Slide 3</div></li>
    <li><div class="orange">Slide 4</div></li>
    <li><div class="green">Slide 5</div></li>
    <li><div class="blue">Slide 6</div></li>
    <li><div class="orange">Slide 7</div></li>
  </ul>
</div>

<a id="prev1" href="javascript:;" title="" class="prev"><</a>
<a id="next1" href="javascript:;" title="" class="next">></a>
<div class="page" id="page-default"></div>

2. Download and include the jQuery slide.js script right before the closing body tag, but after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jQuery-slide.js"></script>

3. Active the slider with some options.

$(".slide-wrapper").slide({
  next: '#next1',
  prev: '#prev1',
  pagination: '#page-default',
  autoPlay: 3000
});

4. Pass the following options to the Slide() function.

var mySlider = new Slide(".slide .slide-wrapper", {

$("selector").slide({

  // 'h' (horizontal) or 'v' (vertical)
  dir: 'h', 

  // animation speed
  speed: 500,

  // prev/next selectors 
  prev: '',
  next: '',

  // 'slide' | 'carousel' | 'fade'
  effect: 'slide',

  // how many items per slide
  perGroup: 1, 

  // how many items to slide at a time
  perSlideView: 1,

  // autoplay interval
  autoPlay: 0, 

  // pagination
  pagination: '',

  // 'dot' | 'num' | 'outer'
  paginationType: 'dot',

  // or 'mouseenter'、 'mousemove'、 'mouseover'、‘hover’
  paginationEvent: 'click',

  // clone the first and last slides
  duplicateEdge: true,

  // enable image lazy loading
  lazyload: false,

  // shows controls on mouse hover
  showWidget: false,

  // callbacks
  beforeSlideFunc: function() {},
  afterSlideFunc: function() {}

});

});

Change log:

2017-04-09

• v3.0.0: bugfix

2016-12-23

• v2.3.2: fixed image lazy loading.

2016-10-23

• v2.2: added image lazy load; API update

2016-07-17

• v1.5: improvement and API update.

2016-07-10

• v1.4: improvement.

2016-04-26

• v1.3

2016-04-23

• JS udapte

2016-04-20

• bugfix and code improvement.

---

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