Как переключать слайд и добавлять/убавлять класс 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);
});