CODEWITHSUNDEEP
javascriptjqueryhtmlnavigationslider
Eduard Valentin
Eduard Valentin

Reputation: 179

jQuery navigation slides

I have a div slider that works fine, but I want a navigation that indicates the current active slide and if you click on a link it shows the slide that you clicked on. My problem is, whenever I click on a link from the nav my page becomes unresponsive and i need to close the tab and reopen the website.I tried it in many browser and it does the same thing. Something went wrong when I added the "navSlides" on click event.Can someone explain me what i need to do to make it work ? Thanks !

Here is my JSFIDDLE

 contentSlides = $('.slide-wrapper');
    navSlides = $('#slide-nav > ul > li > a');
    slidesLeng = contentSlides.length - 1;
    index = 0;

    for (i = 0; i <= slidesLeng; i++) {
        $(contentSlides[i]).addClass('slide-' + i);
        $(navSlides[i]).addClass('slide-' + i);
    }    

    $('div.slide-wrapper > span').on('mouseover', function () {
        $(this).css({ 'font-size': '40px' });
    });

    $('div.slide-wrapper > span').on('mouseout', function () {
        $(this).css({ 'font-size': '50px' });
    });


    $('.next').on('click', function () {
        if (index != slidesLeng) {
            $(contentSlides[index]).fadeOut(400, function () {
                $(this).removeClass('active');
                $(navSlides[index]).removeClass('active');
                index++;
                $(contentSlides[index]).fadeIn(400).addClass('active');
                $(navSlides[index]).addClass('active');
            });
        }
    });

    $('.prev').on('click', function () {
        if (index != 0) {
            $(contentSlides[index]).fadeOut(400, function () {
                $(this).removeClass('active');
                $(navSlides[index]).removeClass('active');
                index--;
                $(contentSlides[index]).fadeIn(400).addClass('active');
                $(navSlides[index]).addClass('active');
            });
        }
    });

    $(navSlides).on('click', function () {
        var slideClass = $(this).attr('class');

        $(contentSlides[index]).fadeOut(400, function () {
            $(this).removeClass('active'); 
            index = 0;
            while (slideClass != $(contentSlides[index]).attr('class') || index<=slidesLeng) {
                index++;
            }
            contentSlides[index].fadeIn(400).addClass('active');
        });    
    });

Upvotes: 0

Views: 48

Answers (1)

Drew Gaynor
Drew Gaynor

Reputation: 8472

The issue is that the while loop in the click handler never exits. The expression slideClass != $(contentSlides[index]).attr('class') || index<=slidesLeng is always true, because the comparison is done between the class property of each element. These will not be the same because the content slides have additional classes, like slide-wrapper.

So, the class property of the first slide will be "slide-wrapper active slide-0", but the class property of the first link will just be "slide-0".

This can be remedied by using the jQuery index function to get the index of the element instead of trying to match the classes. A working version of the click handler is as follows. An updated, working version of the JSFiddle is here: http://jsfiddle.net/kbkkg4ev/.

$(navSlides).on('click', function () {
    var slideIndex = navSlides.index(this);

    $(navSlides).removeClass('active')
    $(this).addClass('active');

    $(contentSlides[index]).fadeOut(400, function () {
        index = slideIndex;
        $(this).removeClass('active');
        $(contentSlides[index]).fadeIn(400).addClass('active');
    });
});

Upvotes: 1

Related Questions