Estoy creando un control deslizante para reaccionar con Slick Slider. El problema es que cuando cambia el tamaño de la pantalla, las diapositivas se reducen o se apilan una encima de la otra.

Slick slider ofrece:

 responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true }, … ]

Pero esto no evita el cambio de tamaño de las diapositivas y no fija el margen entre las diapositivas que cambian constantemente.

Lo intenté :

 .slick-slide { width: auto !important; }

En el archivo CSS, pero luego las diapositivas se acumulan una debajo de la otra, generando 4 filas en lugar de 2. Además, la animación es demasiado grande y crea un espacio en blanco al final del control deslizante.

¿Es posible crear un control deslizante con diapositivas que mantengan el mismo tamaño y espacio entre ellas independientemente del tamaño de la ventana? ¿Una forma de mantener un tamaño fijo de diapositivas , mostrando solo la cantidad de diapositivas posibles en la pantalla y mostrando solo una parte (o no) de las siguientes diapositivas?

Para ser receptivo también. lo que se quiere:

Aquí está mi código:

 const settings = { rows: 2, slidesPerRow: 1, slidesToShow: 3.2, infinite: false, swipeToSlide: true, slidesToScroll: 1, lazyLoad: true, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 2.5, slidesToScroll: 2, } }, { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 2, } }, { breakpoint: 768, settings: { slidesToShow: 1.7, slidesToScroll: 1, arrows: false } }, { breakpoint: 480, settings: { slidesToShow: 1.4, slidesToScroll: 1, arrows: false } } ] }; return ( <> <h2>…</h2> <div className="cell"> <Slider {...settings}> { this.props.data.nodes.map((node,key) => ( <Cell node={node} key={key} /> )) } </Slider> </div> </> );

¡Gracias!