Prevent script from running on mouseover of parent

user_12354523 0
Viewed 71

and thanks in advance for any help.

I have the simple script below to perform a click or the right arrow of a slider (to show the next slide):

<script>
        // Simulate click function
        function clickButton() {
            document.querySelector('.slick-next').click();
        }
  
        // Simulate a click every second
        setInterval(clickButton, 4000);
</script>

The problem is that I must prevent the slider from advancing when the mouse is over the slider. My slider has the class ".product-carousel" and the right arrow has the class ".slick-next".

In plain English I'm looking for something like:

 If the mouse is over the slider {
 do nothing
 }
 else {
 click on the right arrow every 4 seconds.
 }

And then, too make things even more complicated, I need to change the speed in larger screens (because the slider shows 4 pictures on desktops and users need more time to see them all), so, on top of the mouseover problem I have the screen resolution problem.

Again, in plain English this is my goal:

 If the mouse (or finger) is over the slider {
 do nothing
 }
 else {
   if resolution is smaller than or equal to 1024px {
     click on the right arrow every 4 seconds.
   }
   else {
     click on the right arrow every 7 seconds.
   }
 }

Any help will be greatly appreciated.

jquery javascript
2 Answers

All of the desires you are describing are native functions of the Slick slider.

For example: the pauseOnHover can be used to stop a slider from sliding when hovered.

Another example is the support for different settings at different breakpoints:

$('.foo').slick({
  centerMode: true,
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        centerMode: true,
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        centerMode: false,
        slidesToShow: 1
      }
    }
  ]
});

And even the automatic sliding is a native setting: autoplay: true, autoplaySpeed: 4000.

Please have a look at the official Slick documentation.

Edit: you can also change settings AFTER initializing the Slick slider, thus you can set your desired settings in an external script. You can do so by setting slickSetOption on the previously initialized Slick element.

In your case you would use something along the lines of the following code:

$('.foo').slick('slickSetOption', {
   centerMode: true,
   slidesToScroll: 1
}, true); // set to true if the changed options is a UI update

You can use all settings you would use when normally initializing a Slick slider. Just make sure you run the script AFTER the Slick slider has been initalized and you'll be good to go.

user_167964980

Let's divide this problem into different pieces so we can come up with a structured solution

Detect Hover on carousel

const carousel = document.querySelector('.carousel');

carousel.addEventListener('mouseenter', (event) => {
  console.log('Mouse hovering...');
});

carousel.addEventListener('mouseleave', (event) => {
  console.log('Mouse not hovering...');
});

Automatically click through carousel

const nextButton = document.querySelector('.slick-next');

const nextButtonInterval = setInterval(() => nextButton.click(), 4000);

Stopping automatic cycling

const nextButton = document.querySelector('.slick-next');

const nextButtonInterval = setInterval(() => nextButton.click(), 4000);
clearInterval(nextButtonInterval);

Adding the three of them together

const carousel = document.querySelector('.carousel');
const nextButton = document.querySelector('.slick-next');
const cycleTime = 4000;

const startAutomaticCycling = (cycleTime) => {
  return setInterval(() => nextButton.click(), cycleTime);
};

let nextButtonInterval = startAutomaticCycling(cycleTime);

carousel.addEventListener('mouseenter', (event) => {
  clearInterval(nextButtonInterval);
});

carousel.addEventListener('mouseleave', (event) => {
  nextButtonInterval = startAutomaticCycling(cycleTime);
});

Here's a working example of what was explained above. Please notice how the button animates and logs a click but as soon as you hover the carousel it stops.

const carousel = document.querySelector('.carousel');
const nextButton = document.querySelector('.slick-next');
const cycleTime = 4000;

const emulateClickVisually = () => {
  nextButton.blur();
  nextButton.focus();
  setTimeout(() => nextButton.blur(), 400);
  nextButton.click();
  console.log('Button clicked...')
};


const startAutomaticCycling = (cycleTime) => {
  return setInterval(emulateClickVisually, cycleTime);
};

let nextButtonInterval = startAutomaticCycling(cycleTime);

carousel.addEventListener('mouseenter', (event) => {
  clearInterval(nextButtonInterval);
});

carousel.addEventListener('mouseleave', (event) => {
  nextButtonInterval = startAutomaticCycling(cycleTime);
});
.slick-next { 
  transition: transform .3s ease;
}

.slick-next:active,
.slick-next:focus {
  transform: scale(1.5);
}

.carousel {
  padding: 250px 100px;
  background: rgba(0,0,0,.1);
  text-align: center;
  margin-top: 16px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button class="slick-next">Next</button>
  <div class="carousel">
    <h1>Carousel</h1>
  </div>

</body>
</html>

user_41757330
Related