Cellular-friendly Web page Slider(Swiper) Plugin – jQuery mb.momentumSlide

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

Options:

• Helps each mouse drag and contact gestures.
• Helps each vertical and horizontal scrolling.
• Cellular-like momentum scrolling expertise.
• Keyboard Accessibility.
• Permits slider in slider (additionally known as sub pages).
• Create customized controls with easy JavaScript API.

The best way 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 material sections to the slider.

<div id="mySlider">

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

  <!-- Web page 3 -->
  <div class="web page">
    Web page 3 Content material
  </div>

  ... extra pages right here ..

</div>

3. Initialize the mb.momentumSlide plugin.

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

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

4. All default plugin choices.

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

5. Callback features.

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

6. API strategies.

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

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

// subsequent web page
$('#mySlider').momentumSlide('subsequent');

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