How to get jCarousel to stop on the last image and then redirect to a new page?

Question

I'm using the jCarousel plugin for a slideshow that uses a next button, I am very new to jQuery and was wondering how after the last image is viewed, and the user presses the next button, that it will redirect to another web page.

Right now my code is...

<div data-jcarousel="true" data-wrap="circular" class="jcarousel">
    <ul>
        <li><img src="images/1.png" height="400" alt=""></li>
        <li><img src="images/2.png" width="600" height="400" alt=""></li>
        <li><img src="images/3.png" width="600" height="400" alt=""></li>
        <li><img src="images/4.png" width="600" height="400" alt=""></li>
    </ul>
</div>

and for the next button is this...

<a data-jcarousel-control="true" data-target="-=1" href="#" class="jcarousel-control-prev">&lsaquo;</a>

In the end I'll be dynamically creating the list and adding values from my database, so this code is just for testing, and when I can get it straightened out then I am good from there.

Answer 1

Basic steps:

1. Determine if you're on the last slide by using jCarousel events
2. If so, change the 'next' button to a real link or
3. Hide the next button and show a previously hidden link button, styled the same.

Here's an example of 2.

$('.jcarousel')

    .on('jcarousel:animateend', function(event, carousel) {

        var last = carousel._last,
            lastIndex = carousel._items.index(last),
            total = carousel._items.size();

        if (lastIndex == (total - 1)) {
            // The end
            $('.jcarousel-control-next')
                .attr('href', 'http://google.com') // point it somewhere good
                .jcarouselControl('destroy'); // tell jCarousel to stop caring
        }
    });

Working example here: http://jsfiddle.net/r4GaP/1/