samedi 23 avril 2016

How to move from the last slide to the first slide using some buttons using jQuery?

I have written the following piece of code for achieving this. Everything works fine except for when it needs to move from last slide to first slide. I've written for moving from first slide to last slide (using 'previous' button).

Everything works perfect except for when moving from last slide to first. Been scratching my head for hours.

This is how the buttons look:

Next/Prev button

var main = function (){
    $('.dropdown-toggle').click(function(){
        $('.dropdown-menu').toggle();       
    });

    $('.arrow-next').click(function(){
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');


        if(nextSlide.length == 0){
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
    }); 

    $('.arrow-prev').click(function(){
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');

        if(prevSlide.length == 0){
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        }
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
    });
}

$(document).ready(main);

Aucun commentaire:

Enregistrer un commentaire