Как переключать слайд и добавлять/убавлять класс active при клике по любой ссылке?

Есть сайт http://polydent.develoop.ru/

Сделан в формате альбома на 8 экранов, которые слайдятся по горизонтали при прокрутке колесом мыши, а также при клике по навигационным кнопкам.

На втором экране есть ссылки с классом .navigate-link

Нужно сделать корректный (чтобы менялся класс в навигации) плавный переход на следующий слайд по клику на ссылку с классом (.navigate-link)

Помогите добавить нужные строки в код?

Сам код:

$(function () {

    function showSlide(n) {

        $body.unbind("mousewheel");

        currSlide = Math.min(Math.max(0, currSlide + n), $slide.length - 1);

        var displacment = window.innerWidth * currSlide;

        $slides.css('transform', 'translateX(-' + displacment + 'px)');

        setTimeout(bind, 700);

        // change active class on link
        $('nav li.active').removeClass('active');
        $($('li')[currSlide]).addClass('active');

    }

    function bind() {
        $body.bind('mousewheel', mouseEvent);
    }

    function mouseEvent(e, delta) {

        showSlide(delta >= 0 ? -1 : 1);
        e.preventDefault();
    }

    $('nav a').click(function (e) {
        // When link clicked, find slide it points to
        var newslide = parseInt($(this).attr('href')[1]);
        // find how far it is from current slide
        var diff = newslide - currSlide - 1;
        showSlide(diff); // show that slide
        e.preventDefault();
    });

    $('.navigate-link').click(function (e) {
        // When link clicked, find slide it points to
        var newslide = parseInt($(this).attr('href')[1]);
        // find how far it is from current slide
        var diff = newslide - currSlide - 1;
        showSlide(diff); // show that slide
        e.preventDefault();
    });


    $(window).resize(function () {
        // Keep current slide to left of window on resize
        var displacment = window.innerWidth * currSlide;
        $slides.css('transform', 'translateX(-' + displacment + 'px)');
    });

    // cache
    var $body = $('body');
    var currSlide = 0;
    var $slides = $('.slides');
    var $slide = $('.slide');

    // give active class to first link
    $($('nav a')[0]).addClass('active');

    // add event listener for mousescroll
    $body.bind('mousewheel', mouseEvent);
});

Ответы (0 шт):