Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

122
Views
multiple automatic slideshows pause on mouse hover

I'm practically useless at JavaScript so I need your help to add a "pause on mouse hover the slide" feature to this multiple slideshow. I tried to do this but it still is not working.

$(document).ready(function() {
  var slideshowContainers = document.getElementsByClassName("slideshow-container");
  var ref_dot = document.getElementsByClassName("banner-sell");
  
  for (let s = 0; s < slideshowContainers.length; s++) {
    var slides = slideshowContainers[s].querySelectorAll('.mySlides');
    var dot = ref_dot[s].querySelectorAll('.dot-banner');
    var slideIndexAuto = 0;
    showSlidesAuto(true, slides, slideIndexAuto, dot, slideshowContainers[s]);
  };
});

async function showSlidesAuto(status, slides, slideIndex, dots, el) {
  var stop = 0;
  
  $(el).mouseenter(function() {
    status = false;
  })
  
  if (status) {
    var no = (dots[0].classList[1]).replace('dot', '');
    var name_slides = 'mySlides' + no;
    var name_cart = 'cart-code' + no;
    var check_m = document.getElementsByClassName(name_slides);
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    };

    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slideIndex++;

    if (slideIndex > slides.length) {
      slideIndex = 1
    };

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    var menu_code = '';
    menu_code = slides[slideIndex - 1].getAttribute('data-menu');
    pro_code = slides[slideIndex - 1].getAttribute('data-code');
    $('.' + name_cart).attr('data-code', pro_code);
    $('.' + name_cart).attr('data-menu', menu_code);
    dtSlide = [slides, slideIndex, dots, el];
    sldtimeout = setTimeout(function() {
      if (isSlide) {
        showSlidesAuto(true, slides, slideIndex, dots, el)
      }
    }, 2000);
  }
};

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!