0
252
Visualizações`NaN` es un valor no válido para la propiedad de estilo css `left` reaccionar y hacer clic con NextJs
Tengo un error al usar react-slick en Nextjs
const ProductImageSlider: FC = ({ images }) => { const settingsMain = { slidesToShow: 1, slidesToScroll: 1, fade: true, variableWidth: true, }; const settingsThumbs = { slidesToShow: 3, slidesToScroll: 1, infinite: images.length > 3, vertical: true, dots: false, }; const [nav1, setNav1] = useState<Slider>(); const [nav2, setNav2] = useState<Slider>(); const [slider1, setSlider1] = useState<Slider | null>(); const [slider2, setSlider2] = useState<Slider | null>(); useEffect(() => { setNav1(slider1 as Slider); setNav2(slider2 as Slider); }, [slider1, slider2]); return ( <div className="sliders-wrapper"> <div className="thumbnail-slider-wrap"> <Slider {...settingsThumbs} asNavFor={nav1} ref={slider => setSlider2(slider)}> {images.map(slide => ( <div className="slick-slide" key={`thumb-${slide.id}`}> <Image className="slick-slide-image" src={`${slide.src}`} /> </div> ))} </Slider> </div> <div className="main-slider"> <Slider {...settingsMain} asNavFor={nav2} ref={slider => setSlider1(slider)}> {images.map(slide => ( <div className="slick-slide" key={`main-${slide.id}`} style={{ width: 405}} > <Image className="slick-slide-image" src={`${slide.src}`} /> </div> ))} </Slider> </div> </div> ); };fade: true que cambia las imágenes, pero todas las imágenes están en la ventana gráficay mi control deslizante no muestra imágenes (excepto la primera) (ver gif para más explicación https://skr.sh/vElcFeqvrT8?a )
·
Juan Pablo Isaza
Responde à pergunta