//SLIDESHOW
var delay = 7500;
var index = 0;
var leftChevron = document.getElementById('left-chevron');
var rightChevron = document.getElementById('right-chevron');
var slideInterval = setInterval(nextSlide, delay);
var slides = [
document.getElementById('slide0'),
document.getElementById('slide1'),
document.getElementById('slide2'),
document.getElementById('slide3'),
document.getElementById('slide4'),
document.getElementById('slide5'),
document.getElementById('slide6')
];
leftChevron.addEventListener('click', function() {
clearInterval(slideInterval);
slides[index].style.opacity = '0';
index == 0 ? index = 6 : index--;
slides[index].style.opacity = '100';
slideInterval = setInterval(nextSlide, delay);
});
rightChevron.addEventListener('click', function() {
clearInterval(slideInterval);
nextSlide();
slideInteral = setInterval(nextSlide, delay);
});
function nextSlide() {
slides[index].style.opacity = '0';
index == 6 ? index = 0 : index++;
slides[index].style.opacity = '100';
};
its not clearing the interval on my clicks - when I make my click, it just speeds up the time between slides - I tried separating my clicks into mousedown
and mouseup
events - no luck. Any thoughts?