Cycle Plugin is the most common plugin which could be found in my projects. This article shows you how to customize the pager of the Cycle Plugin slide show.
Let’s create the following HTML first.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="slides-wrapper">
<div id="slide-1" style="width: 200px; height: 200px; background-color: red;"></div>
<div id="slide-2" style="width: 200px; height: 200px; background-color: green;"></div>
<div id="slide-3" style="width: 200px; height: 200px; background-color: blue;"></div>
</div>
<div id="nav"></div>
</body>
</html>
You can enabled the default pager by using the pager. option. So this is the script.js.
$(document).ready(function(){
$('#slides-wrapper').cycle({
fx: 'scrollHorz',
speed: 300,
pager: '#nav'
});
});
This will create the default numeric pager.
If you want to customize the pager, you need to make use of the pagerAnchorBuilder option. Here is modified script.js.
$(document).ready(function(){
$('#slides-wrapper').cycle({
fx: 'scrollHorz',
speed: 300,
pager: '#nav',
pagerAnchorBuilder: paginate,
});
});
function paginate(ind, el) {
if (ind == 0) return '<span style="color: red;">Slide One</span>';
else if (ind == 1) return '<span style="color: green;">Slide Two</span>';
else if (ind == 2) return '<span style="color: blue;">Slide Three</span>';
// and so on
}
Refresh the page and see what you get now.
Kudos to Konstantin Kovshenin.
Done =)
Reference: Konstantin Kovshenin – jQuery Cycle: Pager and pagerAnchorBuilder
Eureka! 
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike