Fullscreen HTML5 Slider Plugin For Mobile Pages - yummySlide

File Size: 113 KB
Views Total: 3302
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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.


5. Possible plugin options.


  // 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:


  • cleanup


  • bugfix

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