CODEWITHSUNDEEP
javascriptjquery
James Wilson
James Wilson

Reputation: 809

How do I get this jquery image slider to work properly?

I've just noticed that when I click left or right on on my image slider, it's triggering the same action and therefore left and right are pointless!

You'll notice next() and previous() are exactly the same!

This code is third party and I'm not too sure how to correct it. Any suggestions?

/* Sidebar image slider */
$('.image_slider').each(function () {

    var $slider=$(this), $slides= $slider.find('.slides'), imageSliderInterval;

    /* Functions */
    function next () {
        $slides.children(':last').fadeOut(500, function () {
            $(this).prependTo($slides).fadeIn(1);
        });
    }
    function previous () {
        $slides.children(':last').fadeOut(500, function () {
            $(this).prependTo($slides).fadeIn(1);
        });
    }

    /* Initialize */


    /* Controls */
    $slider.find('.left').click(function () {
        next();
    });
    $slider.find('.right').click(function () {
        previous();
    });

});

This is the image code:

   <section class="image_slider grid_4">
    <nav class="slider_nav"> <a href="#" class="left">&nbsp;</a> <a href="#" class="right">&nbsp;</a> <p class="message_overlay">Click images to enlarge</p> 
    </nav>
    <div class="slides">
        <a href="0003.jpg" rel="fancybox_club_corner" title=""><img src="0003.jpg" alt="" /></a>
        <a href="0002.jpg" rel="fancybox_club_corner" title=""><img src="0002.jpg" alt="" /></a>
        <a href="0001.jpg" rel="fancybox_club_corner" title=""><img src="0001.jpg" alt="" /></a>
    </div>
  </section>

Here is it in action: http://dev.enterf1.com/test.php

Upvotes: 0

Views: 97

Answers (1)

Raimond Kuipers
Raimond Kuipers

Reputation: 1146

After debugging, i think this is the solution. Change the code of the next and previous function according to this:

function next () {
    $slides.children(':last').fadeOut(500, function () {
        $slides.children(':last').remove().prependTo($slides).fadeIn(1);
        });
}
function previous () {
    $slides.children(':first').fadeOut(500, function () {
        $slides.children(':first').remove().appendTo($slides).fadeIn(1);                
    });
}

Upvotes: 1

Related Questions