jslide

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 as well as pagination links (called Tabs).

JavaScript

$('#slides-a').jslide({
	pagination: 'tabs'
});

The plugin will automatically add <a> tags for pagination if it can't find any custom ones. See this example to learn more about customizing pagination (recommended).

Options

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.

pagination ('tabs' / 'preview' / 'scroll' / false)

Pagination Mode. Set to false to disable. tabs is used in this example. preview is similar but instead of a list of pagination links, it will display them in the order of appearence inside a slideshow as well.

$('#slides-a').jslide({
	pagination: false
});

paginationClass (string)

Class name of the element to contain the pagination links.

$('#slides-a').jslide({
	paginationClass: 'slide-pagination'
});

slidetoClass (string)

Class name of the <a> tags for pagination.

$('#slides-a').jslide({
	slidetoClass: 'goto-slide'
});

Html

<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 class="slide-pagination">
		<a class="prev-slide" href="#">&laquo;</a>
		<a class="next-slide" href="#">&raquo;</a>
	</nav>
</div>