CODEWITHSUNDEEP
javascriptjqueryhtml
Loki180
Loki180

Reputation: 73

Simple jQuery click slider

I am having an issue getting my simple jQuery image slider to go backwards. My forward button is working fine.

$("#slideshow > div:gt(-1)").hide();
$(".Leftarrow").click(function(){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
});

This is for the backbutton, this seems to skip a slide or two not go backwards.

I have attempted a few ways to get it to work but so far nothing has worked. I have used .prev() in place of .next() but that did not work, I have also tried changing the number in div:gt(0) but that also did not work. I would of thought it would be somewhat simple to go backwards as it was to go forward.

Any help would be of great use,

Thank You

Upvotes: 2

Views: 593

Answers (1)

Alex Kobzin
Alex Kobzin

Reputation: 69

I wrote some slider prototype based on your code. Looks enough simple.

$("#slideshow > div:last").show();

$(".left").click(function(){
    $('.active')
        .fadeOut(500)
        .removeClass('active')
        .prev()
        .addClass('active')
        .fadeIn(500);
});
$(".right").click(function(){
    $('.active')
        .fadeOut(500)
        .removeClass('active')
        .next()
        .addClass('active')
        .fadeIn(500);
});

Rest you can see by this link: https://jsfiddle.net/tasmanangel/a72mLuh5/

Upvotes: 2

Related Questions