Estoy tratando de hacer un control deslizante, para que los usuarios puedan navegar con la flecha derecha e izquierda del teclado.
stackoverflow Recientemente leí esta pregunta, pero parece que la arquitectura de owlcarousel ha cambiado.
import React from "react"; import OwlCarousel from "react-owl-carousel"; import "owl.carousel/dist/assets/owl.carousel.min.css"; import "owl.carousel/dist/assets/owl.theme.default.min.css"; function App() { document.body.addEventListener("keydown", (event) => { const owl = document.querySelector(".owl-theme"); console.log(event.keyCode); if (event.keyCode === 37) { /*left key*/ //How can I trigger prev button??? } else if (event.keyCode === 39) { /*right key*/ //How can I trigger the next button? } }); return ( <> <OwlCarousel item="3" nav autoplay className="owl-carousel owl-theme owl-loaded" > <div className="item">hi</div> <div className="item">hi</div> <div className="item">hi</div> <div className="item">hi</div> <div className="item">hi</div> <div className="item">hi</div> <div className="item">hi</div> <div className="item">hi</div> <div className="item">hi</div> </OwlCarousel> </> ); } export default App;En primer lugar, debe establecer la variable que encontrará su carrusel:
var owl = $('.owl-carousel');Luego llame al disparador de esta manera:
// Go to the next item $('.customNextBtn').click(function() { owl.trigger('next.owl.carousel'); }); // Go to the previous item $('.customPrevBtn').click(function() { // With optional speed parameter // Parameters has to be in square bracket '[]' owl.trigger('prev.owl.carousel', [300]); }); Aquí encontrará más información sobre los disparadores: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html Busque un evento con Tipo: disparable Todos ellos se pueden llamar como owl.trigger('event-name');
Su código debe ser algo como eso:
if (event.keyCode === 37) { /*left key*/ owl.trigger('prev.owl.carousel'); } else if (event.keyCode === 39) { /*right key*/ owl.trigger('next.owl.carousel'); } Y una cosa más) Detecta el carrusel por nombre de clase: document.querySelector(".owl-theme") Por lo tanto, los disparadores se adjuntarán en todos los carruseles con este nombre de clase al mismo tiempo. La mejor manera será detectar el búho por identificación: llamará a los disparadores solo en un carrusel con una identificación. Por ejemplo:
<div id="myCarousel1" class="owl-carousel owl-theme"> document.getElementById('myCarousel1');