Image Slider
/* Event Slider */
var currentIndex = 0,
items = $('.event-slider__container .event-slider__item'),
toggle = $('.event-slider__toggles ul li'),
itemAmt = items.length;
function cycleItems() {
var item = $('.event-slider__container .event-slider__item').eq(currentIndex);
var toggle = $('.event-slider__toggles ul li').eq(currentIndex);
item.addClass('active');
toggle.addClass('active');
}
var autoSlide = setInterval(function() {
items.removeClass('active');
toggle.removeClass('active');
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 6000);
$('.toggle__right').on('click', function(event) {
event.preventDefault();
clearInterval(autoSlide);
items.removeClass('active');
toggle.removeClass('active');
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.toggle__left').on('click', function(event) {
event.preventDefault();
clearInterval(autoSlide);
items.removeClass('active');
toggle.removeClass('active');
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
/* Toggles */
$('.event-slider__toggles ul li').on('click', function(event){
event.preventDefault();
var slide = $(this).attr('data-slide');
/* Remove class active */
$('.event-slider__toggles ul li').removeClass('active');
$('.event-slider__container .event-slider__item').removeClass('active');
/* Add class active to this toggle and the event that it is associated with */
$(this).addClass('active');
$('.event-slider__container .event-slider__item[data-slide='+slide+']').addClass('active');
/* Change current index to this toggle/event */
currentIndex = slide - 1;
cycleItems();
});