ezslider

A very simple jQuery plugin for slideshows iOS-style bullets on mobile devices. No bells and whistles.

Install

Node:

npm install ezslider

Browser:

Since ezslider requires HammerJS and JQuery to function, you can either include the dependencies yourself as follows:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//hammerjs.github.io/dist/hammer.min.js"></script>
<script src="http://like-falling-leaves.github.io/ezStyles/ezStyles.js">
<script src="http://like-falling-leaves.github.io/ezslider/ezslider.bullets.js">
<script src="http://like-falling-leaves.github.io/ezslider/ezslider.js">
<link href="http://like-falling-leaves.github.io/ezslider/ezslider.css">

Or, you can use the version which rolls up HammerJS:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://like-falling-leaves.github.io/ezslider/ezslider.all.js">

Usage

Examples: All the examples use the following HTML

<div class="slider">
   <div class="item">
      <p>This is the first slider item.</p>
      <p>Second Paragrah</p>
   </div>
   <div class="item">
      <p>This is the second slider item.</p>
      <p>Second Paragrah</p>
   </div>
   <div class="item">
      <p>This is the third slider item.</p>
   </div>
</div>

Example #1: Barebones with no styles loaded and no bullets. See demo.

   $(function () {
       $('.slider').slider({
           noStyles: true,
           bullets: false
       });
   });

Example #2: Bare-bones slider but use default styles. See demo.

   $(function () {
       $('.slider').slider({
           bullets: false
       });
   });

Example #3: Slider with bullets but not styles. See demo.

   $(function () {
       $('.slider').slider({
           noStyles: true,
           bullets: {noStyles: true}
       });
   });

Example #4: Slider with bullets and default styles. See demo.

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