Adding simple Pagination to an existing Slideshow

Question

I'd like to add simple pagination to this existing script: http://sixrevisions.com/demo/slideshow/final.html

So basically it would count the number of <div class="slide"> instances and then generate a list (e.g. 1 - 2 - 3 - 4) and each has a hyperlink to that specific slide.

I'm not so hot with Javascript so would love some help with this.

Can someone show me how to achieve this?

Many thanks for any pointers :-)

score 1 · Accepted Answer · answered Dec 09 '12 at 13:58

Basically, you want to add a link element for each slide using the variable numberOfSlides, then add closure to the bindings on those links. You can reuse the animation calculation by assigning the counter variable to each link as it's created.

for(i = 0; i < numberOfSlides; i++) {
    (function() {
        var slideIndex = i;
        var slideLabel = i + 1;
        var x = $('<a id="slide' + slideLabel + '"href="javascript:void(0);" class="paginatorLink">' + slideLabel + '</a>'); //Format your links here
        x.click(function() {
            currentPosition = slideIndex;
            // Hide / show controls
            manageControls(currentPosition);
            $('#slideInner').animate({
                'marginLeft': slideWidth * -slideIndex
            });
        });
        $('#slideshow').append(x);
    })();
}

Here's a fiddle: http://jsfiddle.net/radiatorsounds/aQb6P/

Adding simple Pagination to an existing Slideshow

1 Answers1

Linked