jQuery Slideshow Next/Previous

0
votes

I'm new to jQuery and I'm just wondering the easiest and most efficient way to create next/previous buttons to go through the slideshow. My code is as follows:

    run = setInterval("switchSlide()", 2000);

    $(document).ready(function() {
        $('#slideshow img:gt(0)').hide();

        $('#slideshow').hover(function() {
            clearInterval(run);
        }, function() {
            run = setInterval("switchSlide()", 2000);
        });

        $('#play').click(function() {
            run = setInterval("switchSlide()", 2000);
        });

        $('#stop').click(function() {
            clearInterval(run);
        });
        $('#previous').click(function() {
                    $('#slideshow img:first').fadeOut(1000).prev().fadeIn(1000).end().appendTo('#slideshow');
                });

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

    });

    function switchSlide() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    }
1
javascriptjquery
The click event for the next button is just the click event for the play button, but without setInterval. – A Person
Can you tell us which slideshow plugin/script you are using? – Jonas G. Drange
Yeah you're right the next button isn't the issue.. what about the previous button? @JonasG.Drange I'm not using a slideshow plugin. I want to do this on my own. – SeanWM

1 Answers

0
votes

I'm assuming next() will get you the next image because this is what you do in switchSlide(). You can add a div element in your HTML

  <div id="next"></div>

then attach a click event to it which will call next(), essentially performing the same action as switchSlide()

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

the same can be done for previous