I am using Slides, a slideshow plugin for jQuery and am wondering how to implement custom pagination HTML. Currently, when there is only one image, it will disable pagination by default, which is what I want. But when there are multiple images, it will output the following HTML for pagination:

<ul class="pagination"></ul>

I want something more like

<div class="more-views">
    <h2>More Views:</h2>
    <ul class="pagination"></ul>
</div>

How can I change the way it auto generates the pagination?

I am using Slides, a slideshow plugin for jQuery and am wondering how to implement custom pagination HTML. Currently, when there is only one image, it will disable pagination by default, which is what I want. But when there are multiple images, it will output the following HTML for pagination:

<ul class="pagination"></ul>

I want something more like

<div class="more-views">
    <h2>More Views:</h2>
    <ul class="pagination"></ul>
</div>

How can I change the way it auto generates the pagination?

• javascript
• jquery
• html
• slideshow

2 Answers 2

You can customise the pagination to an extent, see http://slidesjs./#examples

However if you wanted to edit the generated pagination you would have to go and edit the actual plugin source.

1. Generate Pagination: $('#slides').slides({generatePagination: true,
2. Hide it $('.pagination').hide();
3. Use this function in your code:

function GoToPage(i){       
    $('.pagination li:eq('+ i +') a').click();
}