soy nuevo en react, y estoy intentando aplicar un efecto cuando no tengo mas imagenes en mi carrousel. Estoy utilizando react-slick, y si bien pude configurar varias cosas gracias a la documentacion que tienen no puedo aplicar este efecto...
Lo que deberia suceder es que una vez que no haya mas imagenes en el carrousel, haga una especie de "barrido" hacia la primera imagen.. Dichas imagenes las estoy obteniendo de un get por ende puedo tener muchas imagenes o pocas, estuve investigando y creo que deberia hacer un if con un slickGoTo, pero honestamente no se como obtener los valores para hacerlo.. agradesco cualquier ayuda!
este es mi codigo:
function SampleNextArrow(props) {
const { onClick } = props;
return (
<button type='button' onClick={onClick} className="slick-next slick-arrow" style={{ right: '0vw' }}><FaChevronRight size={'20px'} style={{ color: '#21849C', cursor: 'pointer' }} /></button>
);
}
function SamplePrevArrow(props) {
const { onClick } = props;
return (
<button type='button' onClick={onClick} className="slick-prev slick-arrow" style={{ left: '0vw' }}><FaChevronLeft size={'20px'} style={{ color: '#21849C', cursor: 'pointer' }} /></button>
);
}
const settings = {
initialSlide: 0,
infinite: false,
cssEase: 'linear',
mobileFirst: true,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
variableWidth: true,
responsive:
[{
breakpoint: 425,
settings: {
slidesToShow: 2, slidesToScroll: 1, infinite: false
}
},
{
breakpoint: 320,
settings: {
slidesToShow: 1, slidesToScroll: 1, infinite: false
}
}]
};
return (
<div className='container'>
<Slider {...settings} >
{
elementos.map((item, index) => {
return (
<p>{item.name}</p>
<p>{item.subtitle}</p>
)
})
}
</Slider>
</div>
)