Yet another slideshow plugin for jQuery. Powered by Coffee.
This is the default behaviour of the plugin with extra navigational Html setup to display Next and Previous Slide as well as custom pagination links (called Tabs).
$('#slides-a').jslide({
pagination: 'tabs'
});
The plugin will automatically add <a>
tags for pagination if it can't find any custom ones.
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.
'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
});
Class name of the element to contain the pagination links.
$('#slides-a').jslide({
paginationClass: 'slide-pagination'
});
Class name of the <a>
tags for pagination.
$('#slides-a').jslide({
slidetoClass: 'goto-slide'
});
<div id="slides-a" class="box">
<ul class="slides">
<li class="slide">
<aside class="slide-pagination first-slide">
<h3>Slide 1</h3>
<a href="#" class="goto-slide">View</a>
</aside>
<img src="images/123456.png" />
</li>
<li class="slide">
<aside class="slide-pagination second-slide">
<h3>Slide 2</h3>
<a href="#" class="goto-slide">View</a>
</aside>
<img src="images/4eee88.png" />
</li>
<li class="slide">
<aside class="slide-pagination third-slide">
<h3>Slide 3</h3>
<a href="#" class="goto-slide">View</a>
</aside>
<img src="images/cce400.png" />
</li>
<li class="slide">
<aside class="slide-pagination fourth-slide">
<h3>Slide 4</h3>
<a href="#" class="goto-slide">View</a>
</aside>
<img src="images/ff4e2b.png" />
</li>
</ul>
<nav class="slide-pagination">
<a class="prev-slide" href="#">«</a>
<a class="next-slide" href="#">»</a>
</nav>
</div>
The content of a Tab sits inside the slide element it is referring to and is identified by a class name. The Tabs are copied into a wrapper element with the same class name as the tabs.
<div id="slides-a" class="box">
<ul class="slides">
<li class="slide">
<img src="images/123456.png" />
</li>
<li class="slide">
<img src="images/4eee88.png" />
</li>
<li class="slide">
<img src="images/cce400.png" />
</li>
<li class="slide">
<img src="images/ff4e2b.png" />
</li>
</ul>
<nav class="slide-pagination">
<a class="prev-slide" href="#">«</a>
<a class="next-slide" href="#">»</a>
<aside class="goto-slide first-slide">
<h3>Slide 1</h3>
<a href="#" class="goto-slide">View</a>
</aside>
<aside class="goto-slide second-slide">
<h3>Slide 2</h3>
<a href="#" class="goto-slide">View</a>
</aside>
<aside class="goto-slide third-slide">
<h3>Slide 3</h3>
<a href="#" class="goto-slide">View</a>
</aside>
<aside class="goto-slide fourth-slide">
<h3>Slide 4</h3>
<a href="#" class="goto-slide">View</a>
</aside>
</nav>
</div>
Note that the plugin retains tag name and additional classes.