Next up, we'll get those next and previous buttons around the image working so that the site visitor can easily flip through all the images.
Just like when we hooked up external controls to the carousel in the last example, we'll get started by setting up a callback function for the carousel. We'll call the function
nextPrev
and set it up as follows:function nextPrev(carousel) { } thumbs.jcarousel({ scroll: 6, wrap: 'circular', initCallback: nextPrev });
Now the
nextPrev
function will be called when the carousel is initialized.Inside the
nextPrev()
function, we'll select the previous button and bind a function to the click event:function nextPrev(carousel) { $('#slideshow-prev').bind('click', function() { //Click code will go here }); }
When a site visitor clicks the previous button, we want to show the previous image in the slideshow. As usual with JavaScript, there's more than one way to go about that. Since we've...