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">

Note #1 The first version (ezslider.js) above does not include the bullets plugin -- that should be included manually. The second one (ezslider.all.js) rolls in the bullet plugin as well.

Note #2 The first version (ezslider.js) does not include styles required so you have to explicitly include the styles (see ezslider.css for sample styles). The second one (ezslider.all.js) includes the styles by default though it can be disabled via options so you can still override them if you would like.

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({});
   });