CODEWITHSUNDEEP
javascriptjquerycssslideshow
lefty55104
lefty55104

Reputation: 127

Add an 'active' class to slideshow navigation

I have created a slideshow that fades images in and out on an interval with jQuery. I created a navigation area at the bottom that, when you click on a square, it displays that slide. Two things I need assistance on.

When you click on a navigation square, the timing is off until it goes to the next natural slide.

I need the current slide's square to be a different color. I have been trying to add a class to the square with the matching ID, but it doesn't add a class. 

    $("#slideshow1 > div:gt(0)").hide();

var newvar = setInterval(function() { 
    var currentslide = $('.current').attr('id');
    $('#slideshow1 > div:first')
        .fadeOut(1000)
        .next()
        .addClass('current')
        .fadeIn(1000)
        .end()
        .removeClass('current')
    .appendTo('#slideshow1');
    $('.slider-nav').removeClass('active');
    $('.slider-nav[data-number=' + currentslide + ']').addClass('active');
},  5000);

$(".slider-nav").click(function(e){
    e.preventDefault();
    var currentID = $(this).attr('href');
    $('#slideshow1 > div:first').fadeOut(1000);
    $('div'+currentID).fadeIn(1000).nextAll("div.slide").addBack().prependTo("#slideshow1");
    $('.slider-nav').removeClass('active');
    $('.slider-nav[data-number=' + currentID + ']').addClass('active');
    clearInterval(newvar);
    newvar = setInterval(function() { 
        $('#slideshow1 > div:first')
            .fadeOut(1000)
            .next()
            .addClass('current')
            .fadeIn(1000)
            .end()
            .removeClass('current')
        .appendTo('#slideshow1');
        $('.slider-nav').removeClass('active');
        $('.slider-nav[data-number=' + currentID + ']').addClass('active');
    },  5000);
});

The website where this slideshow is: http://saratoga.mspaceap.com/

Upvotes: 2

Views: 597

Answers (2)

Blazemonger
Blazemonger

Reputation: 92893

Your problem is here:

$('.slider-nav[id=' + currentID + ']').addClass('active');

Because currentID is a string like #1, since you set it three lines earlier to be:

var currentID = $(this).attr('href');

To fix, change your code to:

$('.slider-nav[id=' + currentID.substr(1) + ']').addClass('active')
    .siblings().removeClass('active'); // don't forget to do this

That said: Your navigation elements and slides shouldn't have identical IDs. IDs should always be unique. I can see you're working around this using .attr('id'), but it's still bad practice. Use a common data- attribute or an id like nav1 instead.

Upvotes: 1

Bas Wildeboer
Bas Wildeboer

Reputation: 580

Assign setInterval to a variable like this:

$("#slideshow1 > div:gt(0)").hide();

var interval = setInterval(function() { 
    var currentslide = $('.current').attr('id');

    $('#slideshow1 > div:first')
        .fadeOut(1000)
        .next()
        .addClass('current')
        .fadeIn(1000)
        .end()
        .removeClass('current')
        .appendTo('#slideshow1');
    },  5000);
}

Then make use of clearInterval in your click handler like this:

$(".slider-nav").click(function(e){
    e.preventDefault();
    var currentID = $(this).attr('href');
    $('#slideshow1 > div:first').fadeOut(1000);
    $('div'+currentID).fadeIn(1000).nextAll("div.slide").addBack().prependTo("#slideshow1");
    $('.slider-nav[id=' + currentID + ']').addClass('active');
    clearInterval(interval);
});

That way your interval will be reset on click.

Upvotes: 1

Related Questions