I've made(taken from w3) a slideshow styled menu. I'd like to have it when the user hovers over the menu, the slideshow will stop, and the user takes control manually, then it continues going when the user has left the container.
Currently the auto play doesn't work as the function isn't being called by my failing attempt of an event listener. I've tried various methods with my smooth brain, adding params on showSlides that should only work if true. The setTimeout is hard to work out where I should place it, If I leave it in the showSlides, it creates this endless loop.
edit: added a missing curly brace
html
<div class="hero-navigate">
<a href="" class="">BEGINNERS</a>
<a href="" class="">UNDER 18's</a>
<a href="" class="">EXPERIENCED</a>
<a href="" class="">CLASSES</a>
<a href="" class="">GROUPS</a>
<a href="" class="">INFO</a>
</div>
scss
a {
width: min-content;
display: block;
color: #fae3df;
text-decoration: none;
font-family: lato, sans-serif;
font-weight: 900;
font-size: 4.5vw;
white-space: nowrap;
transform: skew(0deg, -6deg);
line-height: 5.5vw;
transition: 0.2s;
}
a:hover, .hover {
color: #31368a;
font-size: 5vw;
transition: 0.5s;
}
js
let slideIndex = 0;
const hero = document.querySelector('.hero-navigate');
const aTags = document.querySelectorAll('.hero-navigate a');
document.addEventListener('mousemove', (event) => {
if(event.target !== hero){
setTimeout(showSlides(), 1800);
}});
function showSlides() {
// code removing current hover
var i;
for (i = 0; i < aTags.length; i++) {
aTags[i].classList.remove("hover");
}
//adding hover using slideIndex
slideIndex++;
if (slideIndex > aTags.length) {slideIndex = 1}
aTags[slideIndex-1].classList.add('hover')
}
This seems to work:
let slideIndex = 0;
const hero = document.querySelector('.hero-navigate');
const aTags = document.querySelectorAll('.hero-navigate a');
document.addEventListener('DOMContentLoaded', function(){
aTags.forEach(e => e.addEventListener('mouseenter', function(i){
const active = document.querySelector('.hover');
active.classList.remove("hover");
e.classList.add("hover");
slideIndex = Array.prototype.indexOf.call(e.parentNode.children, e);
}))
setInterval(
hero.onmouseleave = function() {
showSlides();
}, 1800
)
})
function showSlides() {
// code removing current hover
var i;
for (i = 0; i < aTags.length; i++) {
aTags[i].classList.remove("hover");
}
//adding hover using slideIndex
slideIndex++;
if (slideIndex > aTags.length) {slideIndex = 1}
aTags[slideIndex-1].classList.add('hover')
}
Removed a:hover
.hover {
color: #31368a;
font-size: 5vw;
transition: 0.5s;
}
First remove the mousemove event. It is triggering when you move the mouse over and over and over. That is why it is jumping. You want it just to cancel a timer when you hover over something. So on hover, cancel the time. mouseout, restart your timer.