jQuery Cycle Plugin – Customize pager anchor HTML

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

Advertisements

One thought on “jQuery Cycle Plugin – Customize pager anchor HTML”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s