y gracias de antemano por cualquier ayuda.
Tengo la secuencia de comandos simple a continuación para realizar un clic o la flecha derecha de un control deslizante (para mostrar la siguiente diapositiva):
<script> // Simulate click function function clickButton() { document.querySelector('.slick-next').click(); } // Simulate a click every second setInterval(clickButton, 4000); </script>El problema es que debo evitar que el control deslizante avance cuando el mouse está sobre el control deslizante. Mi control deslizante tiene la clase ".product-carousel" y la flecha derecha tiene la clase ".slick-next".
En inglés simple, estoy buscando algo como:
If the mouse is over the slider { do nothing } else { click on the right arrow every 4 seconds. }Y luego, para complicar aún más las cosas, necesito cambiar la velocidad en pantallas más grandes (porque el control deslizante muestra 4 imágenes en los escritorios y los usuarios necesitan más tiempo para verlas todas), así que, además del problema del mouseover, tengo el problema de resolucion de pantalla.
Nuevamente, en lenguaje sencillo, este es mi objetivo:
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. } }Cualquier ayuda será apreciada.
Todos los deseos que está describiendo son funciones nativas del control deslizante Slick.
Por ejemplo: pauseOnHover se puede usar para evitar que un control deslizante se deslice cuando se desplaza.
Otro ejemplo es el soporte para diferentes configuraciones en diferentes puntos de interrupción:
$('.foo').slick({ centerMode: true, slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { centerMode: true, slidesToShow: 3 } }, { breakpoint: 480, settings: { centerMode: false, slidesToShow: 1 } } ] }); E incluso el deslizamiento automático es una configuración nativa: autoplay: true, autoplaySpeed: 4000 .
Por favor, eche un vistazo a la documentación oficial de Slick .
Editar: también puede cambiar la configuración DESPUÉS de inicializar el control deslizante Slick, por lo que puede establecer la configuración deseada en un script externo. Puede hacerlo configurando slickSetOption en el elemento Slick previamente inicializado.
En su caso, usaría algo similar al siguiente código:
$('.foo').slick('slickSetOption', { centerMode: true, slidesToScroll: 1 }, true); // set to true if the changed options is a UI updatePuede usar todas las configuraciones que usaría normalmente al inicializar un control deslizante Slick. Solo asegúrese de ejecutar el script DESPUÉS de que se haya inicializado el control deslizante Slick y estará listo para comenzar.
Dividamos este problema en diferentes partes para que podamos llegar a una solución estructurada.
Detectar Hover en carrusel
const carousel = document.querySelector('.carousel'); carousel.addEventListener('mouseenter', (event) => { console.log('Mouse hovering...'); }); carousel.addEventListener('mouseleave', (event) => { console.log('Mouse not hovering...'); });Haga clic automáticamente en el carrusel
const nextButton = document.querySelector('.slick-next'); const nextButtonInterval = setInterval(() => nextButton.click(), 4000);Detener el ciclo automático
const nextButton = document.querySelector('.slick-next'); const nextButtonInterval = setInterval(() => nextButton.click(), 4000); clearInterval(nextButtonInterval);Sumando los tres juntos
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); }); Aquí hay un ejemplo de trabajo de lo que se explicó anteriormente. Observe cómo el botón se anima y registra un click , pero tan pronto como pasa el carrusel, se detiene.
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>