Implementé el control deslizante de reacción y obtengo las imágenes aplicando el mapa en una matriz de datos de imageArray. De la clave que obtengo, tengo que llamar a url como image src para obtener la imagen. Obtengo imágenes, pero el carrusel no obedece las reglas definidas en la configuración debido a la obtención dinámica de imágenes.
import Slider from "react-slick";
...
let settings = { accessibility: false, slidesToShow: 4.25, slidesToScroll: 1, arrows: true, rows: 2, lazyLoad: true, dots: false, variableWidth: true, adaptiveHeight: false, infinite: false, }
...
<Slider {...settings}> {imageArray.map(individualImage => { if (individualImage.DESCRIPTION.toLowerCase().includes(selectedDescription.toLowerCase())) { return <img title={individualImage.DESCRIPTION} alt={individualImage.DESCRIPTION + ' image'} className={individualImage.KEY === imageSelected ? borderColor : 'image-default-border'} onClick={() => imgClick(field, individualImage.KEY, individualImage.DESCRIPTION)} src={`www/url.com/key=${individualImage.KEY}`} /> } return true })} {imageArray.map(individualImage => { if (individualImage.DESCRIPTION1.toLowerCase().includes(selectedDescription?.toLowerCase())) { return <img title={individualImage.DESCRIPTION1} alt={individualImage.DESCRIPTION1 + ' image'} className={individualImage.KEY1 === imageSelected ? borderColor : 'image-default-border'} onClick={() => imgClick(field, individualImage.KEY1, individualImage.DESCRIPTION1)} src={`www/url.com/key=${individualImage.KEY1}`} /> } return true })} </Slider>