i have found this simple jQuery code for a slideshow below from this blog.

/

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: /

<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>

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>

• javascript
• jquery
• html
• slideshow

6 Answers 6

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);
    });
}

Use your code in click event of next button. Something like this:

    $("#button_id").click(function(){
all your lines in **setInterval**
});

For previous button use .prev instead of .next

responsive slideshow free jquery script

I used the above script in a project recently and its responsive, lightweight, fully customizable with or without buttons. My recommendation..

Add a couple of img in your HTML like this:

<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>
<img src="prev.jpg" width="50" height="50" id="imgPrev">
<img src="next.jpg" width="50" height="50" id="imgNext">

and change your javascript like this:

    $(document).ready(function() {

        $("#imgNext").click(function() {
             var $curr = $('.slideshow img:visible'),
                 $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
                $next.css('z-index',2).fadeIn('slow', function() {
                $curr.hide().css('z-index',0);
                $next.css('z-index',1);
            });
    });

        $("#imgPrev").click(function() {
             var $curr = $('.slideshow img:visible'),
                 $prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
                $prev.css('z-index',2).fadeIn('slow', function() {
                $curr.hide().css('z-index',0);
                $prev.css('z-index',1);
            });
        });

        set

Interval(function() {
        var $curr = $('.slideshow img:visible'), 
            $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
        $next.css('z-index',2).fadeIn('slow', function() {
            $curr.hide().css('z-index',0);
            $next.css('z-index',1);
        });
    }, 6000); // milliseconds
});

I tried it with your code on fiddler and it works :)

I know this is old, but correct the below:

$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow');

.slideshow {
    width: 100%;
    position: relative;
    height: auto;
}
.slideshow img:first-child { position:relative; } /*auto height adjust*/
.slideshow img {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    height: auto;
    position: absolute;
}

Just trying to figure on a reverse. All the above are nice, but the transitions were, uh, not smooth. Using class's for a reason on this one.

Try

 $('.next').click(function(){ 
     $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
   })