Issues with jQuery Slider

Question

Having a few issues with a jquery slider that I'm trying to make.

On jsf: jsfiddle.net/0hq91y5v/

I've got five dot li links that I'm trying to link to each slide. I obviously want to make it so that clicking on each button changes the class to activeDot and removes the class from the current active button. I've tried this in jquery but it's not working.

I've also added some code to try and fade between the different slides after clicking on each button using the same method, by switching the activeSlide class for each, but this also won't work.

Lastly, looking at the code I've used, what would be a better / more semantic method of adding and removing the activeSlide class upon clicking on the associated button, rather than doing like I have and creating a function for each button?

Answer 1

You need to make some changes to your current jQuery Code and markup too.

take a look at fiddle

this code will help you to achieve the behaviour you are expecting, you can add fadeIn() and fadeOut() as you need.

$(document).ready(function() {

    var activeSlide = $('#homeSlider > .activeSlide');
    var activeDot = $('#homeSliderNav > ul > li.activeDot');

    $('#homeSliderNav > ul > li').click(function() {
        $('#homeSliderNav > ul > li').removeClass('activeDot');
        $(this).addClass('activeDot');
        $('.slide').removeClass('activeSlide');
        var slide = this.getAttribute('data-id');
        $('#' + slide).addClass('activeSlide');

    });

});