0.0.6 • Published 10 years ago
ezslider v0.0.6
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({});
});