Mobile-friendly Page Slider(Swiper) Plugin - jQuery mb.momentumSlide

mb.momentumSlide is a jQuery plugin that takes several content sections on the webpage and turns them into a responsive and touch-enabled slider (swiper).

Features:

• Supports both mouse drag and touch gestures.
• Supports both vertical and horizontal scrolling.
• Mobile-like momentum scrolling experience.
• Keyboard Accessibility.
• Allows slider in slider (also called sub pages).
• Create custom controls with simple JavaScript API.

How to use it:

1. Add references to jQuery library and the mb.momentumSlide plugin.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/inc/jquery.mb.momentumSlide.js"></script>

2. Add content sections to the slider.

<div id="mySlider">

  <!-- Page 1 -->
  <div class="page">
    Page 1 Content
  </div>
  
  <!-- Page 2 -->
  <div class="page" >
    <div id="subSlider">
      <div class="page">
        Page 2-1
      </div>
      <div class="page">
        Page 2-2
      </div>
      <div class="page">
        Page 2-3
      </div>
    </div>
  </div>

  <!-- Page 3 -->
  <div class="page">
    Page 3 Content
  </div>

  ... more pages here ..

</div>

3. Initialize the mb.momentumSlide plugin.

$("#mySlider").momentumSlide({
  direction:"h",
  waitBefore: 10,
  anchor: 150,
  duration:600
});

$("#subSlider").momentumSlide({
  direction: "v",
  waitBefore: 10,
  anchor: 150,
  duration: 600
});

4. All default plugin options.

$("#mySlider").momentumSlide({
  duration        : 600,
  direction       : "h",
  waitBefore      : 100,
  tollerance      : "auto",
  changePoint     : 3,
  propagate       : true,
  anchor          : 0,
  pagination      : 5,
  activateKeyboard: true,
  indexPlaceHolder: null,
});

5. Callback functions.

$("#mySlider").momentumSlide({
  onInit          : function (el) {},
  onStart         : function (el) {},
  onDrag          : function (el) {},
  onBeforeEnd     : function (el) {},
  onEnd           : function (el) {},
  onBounceStart   : function (el) {},
  onBounceEnd     : function (el) {},
  onGoTo          : function (el) {}
});

6. API methods.

// goto page 3
$('#mySlider').momentumSlide('goto',3);

// prev page
$('#mySlider').momentumSlide('prev');

// next page
$('#mySlider').momentumSlide('next');

---

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