jQuery Cycle pagerAnchorBuilder Wordpress Modularity Theme

The Modularity Wordpress theme includes a "post slider" built around jQuery Cycle. It uses pager to display a small number above the sliders. I would love to be able to change that number into the post title.

The code in the theme is as follows:

 $doc_re开发者_C百科ady_script .= '

jQuery(function() {

   jQuery("#slider-posts").cycle({
       fx:      "scrollHorz",
       timeout:  0,
       prev:    "#prev",
       next:    "#next",
       pager:   "#slider-nav",
 containerResize: 0
   });

});';

I am NOT a jQuery coder (as you might be able to tell!) and I thought a simple adjustment to the code as follows would do the trick:

$doc_ready_script .= ' jQuery(function() {

   jQuery("#slider-posts").cycle({
       fx:      "scrollHorz",
       timeout:  0,
       prev:    "#prev",
       next:    "#next",
       pager:   "#slider-nav",
 containerResize: 0,
 pagerAnchorBuilder: function(idx, slide) { 
              return '<li><a href="#">' + jQuery(slide).children("h2").eq(0).text() + '</a></li>';
      }
   });

});';

However, I now get an error saying "Parse error: syntax error, unexpected '>'".

So, I realise that I have done something really daft!

Can some kind jQuery guru point me in the right direction please?

Many thanks in anticipation!

I needed the exact same functionality on my website. You need to build the array first using the .map() function. You can then loop through this array in the pagerAnchorBuilder function.

Check out the tutorial I've written. It'll show you exactly how to get this working!