Yet another slideshow plugin for jQuery. Powered by Coffee.
This is the default behaviour of the plugin with some extra navigational Html setup to display Next and Previous Slide links.
$('#slides-a').jslide();
As you can see, the JavaScript is just a default plugin call. Navigation is actually enabled by inserting the Html. The plugin looks for elements inside the outer element (the one you call the plugin on) that match the selectors for a Next and Previous link and binds the corresponding click events to them.
The following are options relevant to this example. See the documentation for a list of all
available options.
The shown usage examples are default settings.
Selector for Next Slide link.
$('#slides-a').jslide({
next: 'a.next-slide'
});
Selector for Previous Slide link.
$('#slides-a').jslide({
prev: 'a.prev-slide'
});
<div id="slides-container">
<ul id="slides-wrapper">
<li class="slides"><img src="images/123456.png" /></li>
<li class="slides"><img src="images/4eee88.png" /></li>
<li class="slides"><img src="images/cce400.png" /></li>
<li class="slides"><img src="images/ff4e2b.png" /></li>
</ul>
<nav>
<a class="prev-slide" href="#">«</a>
<a class="next-slide" href="#">»</a>
</nav>
</div>