I'm trying to redesign the homepage of our website and have set up a duplicate homepage to test on which you can view here: http://baseballsoftballuk.com/homepagetestfortconly/

The slideshow is already there, I believe using JQuery Cycle but I want to add buttons so you can jump to a slide rather than have to wait for it to come around again. 

I've seen the 'pager' option here:  http://jquery.malsup.com/cycle/pager.html and I'd like to add something similar to our slideshow but I can figure out where to put that code as, no matter how I do it, it doesn't seem to add a pager to our homepage, is there something else I need to puyt in the HTML for the page or the CSS for the site?

Also, is there someway of re-styling the numbers to bullet points or something a little more stylish than what is there?

The section of the site's javascript file that applies to the feature section is below, hope this helps but let me know if I need to post anything from the JQuery Cycle file or anything else.

Many Thanks in advance for any help you can provide.

2. // Home page featured area
3. 
   
4. $(document).ready(function(){
5. $('.feature_images')
6. .cycle({ 
7. fx:     'fade', 
8. speed:  300,
9. timeout: 4000,
10. before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
11. $('.feature_list li').removeClass('highlight');
12. $('.feature'+($(nextSlideElement).index()+1)).addClass('highlight');
14. $('.feature1').hover(function() {
15. $('.feature_images').cycle(0);
16. $('.feature_list li').removeClass('highlight');
17. $(this).addClass('highlight');
18. }, function() {}
19. );
20. $('.feature2').hover(function() {
21. $('.feature_images').cycle(1);
22. $('.feature_list li').removeClass('highlight');
23. $(this).addClass('highlight');
24. }, function() {}
25. );
26. $('.feature3').hover(function() {
27. $('.feature_images').cycle(2);
28. $('.feature_list li').removeClass('highlight');
29. $(this).addClass('highlight');
30. }, function() {}
31. );
32. $('.feature4').hover(function() {
33. $('.feature_images').cycle(3);
34. $('.feature_list li').removeClass('highlight');
35. $(this).addClass('highlight');
36. }, function() {}
37. );
38. $('.feature5').hover(function() {
39. $('.feature_images').cycle(4);
40. $('.feature_list li').removeClass('highlight');
41. $(this).addClass('highlight');
42. }, function() {}
43. );
44. 
    
45. $('.feature_list li').click(function() {
46. var url = $(this).find('a').attr("href");
47. $(location).attr('href',url);
48. });
49. });

The HTML for the page is as follows:

2. <div class="featured_wrapper clearfix">
3. <div class="featured">
4. 
   
5.             
6.                 <div class="featured_shadow"></div>
7. <div class="feature_images">
8.                 
9. 
   
10.                {exp:channel:entries channel="featured" limit="5" dynamic="no"}    
11. 
    
13. 
    
14. <div class="slider">
15. <a href="{if "{featured_link}"<>""}{featured_link}{if:else}/news/view/{related_entries id="featured_news_link"}{url_title}{/related_entries}{/if}"><img src="{featured_image}" alt="{title}" /></a>
16. <div class="headline">
17. <div class="headline_bot">
18. <h3><a href="{if "{featured_link}"<>""}{featured_link}{if:else}/news/view/{related_entries id="featured_news_link"}{url_title}{/related_entries}{/if}">{title}</a></h3>
19. <p><a href="{if "{featured_link}"<>""}{featured_link}{if:else}/news/view/{related_entries id="featured_news_link"}{url_title}{/related_entries}{/if}">{featured_abstract}</a></p>
20. <div class="controls">
21. </div>
22. </div>
23. </div>
24. </div>
26.  {/exp:channel:entries}
27. </div><!--/feature_images-->
28.             
29.                 
30. 
    
31.                 <ul class="feature_list">
32.                     {exp:channel:entries site="not moo" channel="not moo" entry_id="{exp:n_categories:get_news_bsuk frontpage='TRUE'}" orderby="date" paginate="bottom" limit="5" dynamic="no" parse="inward"}
33.                         <li class="feature">
34.                             <a href="{url_title_path="/news/view"}">{title}</a>
35.                        
36.                     {/exp:channel:entries}
37.                 </ul>
38. </div><!--/featured_shadow-->
39. </div><!--/featured-->
40. </div><!--/featured_wrapper-->