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