Omzep Omzep - 22 days ago 5
HTML Question

How to add prev and next button in a simple jquery slideshow code

i have found this simple

jQuery
code for a slideshow below from this blog.

http://leavesofcode.net/2012/08/17/simple-slideshow/

It perfectly works in the project i am working on right now, where i can call the images with
jQuery load()
function and the slideshow still works. Although i would like to implement a previous and next button in the same code if its possible. Any help would be really appreciated. Please help thanks.

Here is the code: http://jsfiddle.net/mblase75/CRUJJ/

<script>
$(document).ready(function() {
setInterval(function() {
var $curr = $('.slideshow img:visible'), // should be the first image
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
// if there isn't a next image, loop back to the first image
$next.css('z-index',2).fadeIn('slow', function() { // move it to the top
$curr.hide().css('z-index',0); // move this to the bottom
$next.css('z-index',1); // now move it to the middle
});
}, 6000); // milliseconds
});
</script>

<div class="slideshow">
<img src="first-image.jpg" width="500" height="100" alt="first image">
<img src="second-image.jpg" width="500" height="100" alt="second image">
<img src="third-image.jpg" width="500" height="100" alt="third image">
<img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>

<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>

cfs cfs
Answer

You'll need to create functions for getNext and getPrev and attach those as event handlers to the elements you want to move you forward and backward through the slideshow.

I created a common transition function which is shared by both the getNext and getPrev functions so that the transition code can be shared.

In the below example, clicking the next or previous buttons will pause the slideshow, though it would be easy to change it to continue the automatic transitions.

Working Demo

var interval = undefined;
$(document).ready(function () {
    interval = setInterval(getNext, 2000); // milliseconds
    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);
});

function getNext() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();

    transition($curr, $next);
}

function getPrev() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
    transition($curr, $next);
}

function transition($curr, $next) {
    clearInterval(interval);

    $next.css('z-index', 2).fadeIn('slow', function () {
        $curr.hide().css('z-index', 0);
        $next.css('z-index', 1);
    });
}