CODEWITHSUNDEEP
javascript
html.hayden
html.hayden

Reputation: 55

stop carousel slides when mouse is hovered on div

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')
}

Upvotes: 0

Views: 713

Answers (2)

html.hayden
html.hayden

Reputation: 55

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;
       }

Upvotes: 1

Justin St. Germain
Justin St. Germain

Reputation: 339

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.

Upvotes: 1

Related Questions