Responsive Mobile Swiper/Carousel Plugin - jquery-slide.js

The jquery-slide.js jQuery plugin lets you create a responsive, mobile-friendly slider/carousel/swiper with a lot of customization options.

Main features:

• Supports both mouse drag and touch swipe events.
• Automatically loops through elements at a given speed.
• 8 built-in transition effects.
• Easing options.
• Highly customizable pagination and navigation.

How to use it:

1. Insert the main JavaScript file jquery-slide.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery-slide.js"></script>

2. Insert a group of items to the slider.

<div class="slide">
  <div class="item item_1"></div>
  <div class="item item_2"></div>
  <div class="item item_3"></div>
  ...
</div>

3. Initialize the plugin and done.

$(function() {
  $('.slide').slide();
})

4. Config the animation when transitioning between slides.

$('.slide').slide({

  // random,up,down,left,right,opacity,zoomBig,zoomSmall
  actionIn:'random',

  // random,up,down,left,right,opacity,zoomBig,zoomSmall
  actionOut:'random',

  // animation speed: normal,fast,slow,(Number)
  speed:'normal',

  // easing
  easing:'linear',

  // transition delay
  delay:0,

  // stops auto-play on hover
  hoverStop:false

});

5. Customize the pagination control.

$('.slide').slide({

  page: true, // default: null
  pageDefault:{
      // hor,ver
      direction:'hor',
      hover:true,
      no:true,
      borderWidth:0,
      borderColor:undefined,
      borderHover:undefined,
      bgcolor:undefined,
      bgcolorHover:undefined,
      color:undefined,
      colorHover:undefined,
      // rect,oval,rhomb
      shape:'rect',
      width:16,
      height:16,
      space:2,
      margin:'auto'
  },

});

6. Customize the navigation control.

$('.slide').slide({

  flip: true, // default: null
  flipDefault:{
    // lr,rl,tb,bt
    direction:'lr',
    next:undefined,
    prev:undefined,
    margin:'auto'
  }

});

Changelog:

2018-06-07

• Fixed icons

2018-06-05

• Fixed for mobile

---

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