Fullscreen HTML5 Slider Plugin For Mobile Pages - yummySlide

yummySlide is a jQuery/Zepto plugin that provides an easier way to create a fullscreen horizontal/vertical slider for your mobile web applications. Swipe the screen to navigate between sectioned pages.

Scan the QR code below to view the demo in your mobile device:

How to use it:

1. Place the required stylesheet in the document's head section.

<link rel="stylesheet" href="y-slide.css">

2. The primary HTML structure.

<div class="y-slide">
  <div class="container">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
    ...
  </div>
</div>

3. Place jQuery library (or Zepto.js) and the yummySlide.js script at the end of the document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="dist/yummySlide.js"></script>

4. Initialize the plugin and you're done.

$('.y-slide').yummySlide();

5. Possible plugin options.

$('.y-slide').yummySlide({

  // infinite loop
  loop: false, 

  // sequential | reverse | [array]
  order: 'sequential', 

  // vertical | horizontal
  direction: 'vertical', 

  // normal | cover | fade | scale
  mode: 'scale', 

  // callbacks
  loadFn: null,
  init: null, 

  // custom trigger events
  custom: null
  
});

Change log:

2016-11-15

• cleanup

2016-11-06

• bugfix

---

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