Skip to content

Instantly share code, notes, and snippets.

@tulios
Created October 31, 2012 11:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tulios/3986521 to your computer and use it in GitHub Desktop.
Save tulios/3986521 to your computer and use it in GitHub Desktop.
Dotted pagination for jquery.destaque
var destaque = $("#slide-container").destaque({
itemSelector: ".item",
itemBackgroundSelector: ".background",
itemForegroundElementSelector: ".foreground .element",
controlsSelector: "#slide-pagination a",
onPageUpdate: function(destaque, pageData) {
$(".indicator .bullet").removeClass("active");
$(".indicator .bullet[rel='"+ pageData.currentSlide +"']").addClass("active");
}
});
$(".indicator .bullet").click(function(e) {
e.preventDefault();
destaque.goTo(parseInt($(this).attr("rel"), 10));
});
<div class="indicator">
<a href="#" class="bullet active" rel="0">1</a>
<a href="#" class="bullet" rel="1">2</a>
<a href="#" class="bullet" rel="2">3</a>
<a href="#" class="bullet" rel="3">4</a>
<a href="#" class="bullet" rel="4">5</a>
<a href="#" class="bullet" rel="5">6</a>
<a href="#" class="bullet" rel="6">7</a>
<a href="#" class="bullet" rel="7">8</a>
<a href="#" class="bullet" rel="8">9</a>
<a href="#" class="bullet" rel="9">10</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment