Freeze the slider on hover-CodePudding

There are sliders on my site. Which keeps sliding using functions and setTimeout. I am currently trying to make my slider freeze on mouse hover. But adding an event listener to the slides doesn't seem to work. What can be the best possible solution?

//quote slider

let qslideIndex = 0;
let qslides = document.getElementsByClassName("quotemySlides");
let qdots = document.getElementsByClassName("quotedot");

//hiding each image through loop
const qhidenLoop = ()=>{
    let j;
    for (j = 0; j < qslides.length; j  ) {
      qslides[j].style.display = "none";
    }
}

//running the slide
const qautoslideRun = ()=>{
    qslideIndex  ;
    if (qslideIndex > qslides.length) {
        qslideIndex = 1;
    }
    qhidenLoop();
    qslides[qslideIndex-1].style.display = "block";
}

qshowSlides();

//all slide functions running here
function qshowSlides() {
    qautoslideRun();
  setTimeout(qshowSlides, 10000); // Change image every 10 seconds
}

.quoteslideshow-container {
  max-width: 40%;
  position: relative;
  margin: 5% auto 5% auto;
}

.quotemySlides {
  display: none;
}


/* Fading   slide in animation */

.slideinfromleft {
  animation: slideinfromleft 1.5s ease-in 0s 1 normal forwards;
}

.image {
  transition: border, border-radius 1s linear;
}

.image:hover {
  border-radius: 20%;
  border: 2px solid black
}

@keyframes slideinfromleft {
  0% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    opacity: 0.1;
  }
  50% {
    opacity: .5
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    opacity: 1
  }
}

<body>
  <div >
    <div >
      <div >
        <!-- Full-width images with number and caption text -->
        <div >
          <img  src="img/quote1.png" style="width:100%">
        </div>

        <div >
          <img  src="img/quote2.png" style="width:100%">
        </div>

        <div >
          <img  src="img/quote3.png" style="width:100%">
        </div>

        <div >
          <img  src="img/quote4.png" style="width:100%">
        </div>
      </div>
      <br>
    </div>
  </div>
  <script src="tribute.js" type="text/javascript"></script>
  <script src="quotetribute.js" type="text/javascript"></script>
</body>

CodePudding user response：

Use a variable to hold setTimeout into it, on mouseover slide clear it, on mouseleave call function slider() again, I change timeout to 3 seconds for test hover. on mouseleave I call function qshowSlides() after 1 second by setTimeout, you can call it without setTimeout or increase time for setTimeout

//quote slider

let qslideIndex = 0;
let qslides = document.getElementsByClassName("quotemySlides");
let qdots = document.getElementsByClassName("quotedot");
let timeoutHolder = null;

//hiding each image through loop
const qhidenLoop = ()=>{
    let j;
    for (j = 0; j < qslides.length; j  ) {
      qslides[j].style.display = "none";
    }
}

//running the slide
const qautoslideRun = ()=>{
    qslideIndex  ;
    if (qslideIndex > qslides.length) {
        qslideIndex = 1;
    }
    qhidenLoop();
    qslides[qslideIndex-1].style.display = "block";
}

qshowSlides();


//all slide functions running here
function qshowSlides() {
    qautoslideRun();
  timeoutHolder = setTimeout(qshowSlides, 3000); // Change image every 3 seconds for test hover
}

const disableAutoSlideOnHover = () => {
  const container = document.querySelector( ".quoteslideshow-container" );
  container.addEventListener( "mouseover", function() {
    clearTimeout( timeoutHolder );
    timeoutHolder = null;
  } );
  container.addEventListener( "mouseleave", function() {
    setTimeout( () => qshowSlides(), 1000 )
  } );
}
disableAutoSlideOnHover();

.quoteslideshow-container {
  max-width: 40%;
  position: relative;
  margin: 5% auto 5% auto;
}

.quotemySlides {
  display: none;
}


/* Fading   slide in animation */

.slideinfromleft {
  animation: slideinfromleft 1.5s ease-in 0s 1 normal forwards;
}

.image {
  transition: border, border-radius 1s linear;
}

.image:hover {
  border-radius: 20%;
  border: 2px solid black
}

@keyframes slideinfromleft {
  0% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    opacity: 0.1;
  }
  50% {
    opacity: .5
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    opacity: 1
  }
}

<body>
  <div >
    <div >
      <div >
        <!-- Full-width images with number and caption text -->
        <div >
          <img  src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="width:100%">
        </div>

        <div >
          <img  src="https://images.unsplash.com/photo-1586227740560-8cf2732c1531?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1261&q=80" style="width:100%">
        </div>

        <div >
          <img  src="https://images.unsplash.com/photo-1659944975073-453265ccf3a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="width:100%">
        </div>

        <div >
          <img  src="https://images.unsplash.com/photo-1659830686710-9c6df95f8cf3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" style="width:100%">
        </div>
      </div>
      <br>
    </div>
  </div>
  <script src="tribute.js" type="text/javascript"></script>
  <script src="quotetribute.js" type="text/javascript"></script>
</body>