Aquí está mi código:
import React from 'react' import { useKeenSlider } from 'keen-slider/react' // Styles import 'keen-slider/keen-slider.min.css' interface Props { children: any } // const animation = { duration: 20000, easing: (t: number) => t } const Slider = ({ children }: Props) => { // Refs const [sliderRef] = useKeenSlider<HTMLDivElement>( { loop: true, slides: { perView: 4 } }, [ (slider) => { let timeout: ReturnType<typeof setTimeout> let mouseOver = false function clearNextTimeout() { clearTimeout(timeout) } function nextTimeout() { clearTimeout(timeout) if (mouseOver) return timeout = setTimeout(() => { slider.next() }, 2000) } slider.on('created', () => { slider.container.addEventListener('mouseover', () => { mouseOver = true clearNextTimeout() }) slider.container.addEventListener('mouseout', () => { mouseOver = false nextTimeout() }) nextTimeout() }) slider.on('dragStarted', clearNextTimeout) slider.on('animationEnded', nextTimeout) slider.on('updated', nextTimeout) } ] ) return ( // @ts-ignore <div ref={sliderRef} className='select-none keen-slider'> {React.Children.map(children, (child, i) => ( <div key={`featuredCape-${i}`} className={`keen-slider__slide sm:h-300 sm:w-300 ${ i !== 0 ? '' : '' }`} > {child} </div> ))} </div> ) } export default Slider
Esto es lo que estoy obteniendo en el tamaño de la consola. En los documentos de gran control deslizante, había una opción para establecer la selección de tamaño en nulo que está haciendo esta clase. Cuando hice eso, hizo el tamaño correcto, pero da un error.
selector: null selector Error: Este es el error después de agregar selector null
¡El tamaño ahora está bien! tamaño después de agregar selector nulo