0

me encuentro usando react slick para crear un carrusel de tarjetas y no he podido hacer que las tarjetas obtengan el ancho que deseo y siempre aparecen pegadas aunque intente darles margen. No se que clase de estilo tenga que darle para que las tarjetas aparezcan separadas una de otra. Este es el codigo utilizado:

React

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SampleNextArrow />,
    autoplay: true,
    
  };
  return (
    <div>
    <h2> Multiple items </h2>
    <Slider {...settings} className="slider">
    <div className={`card`}>
                <span className={`favorite-brand`}>♥</span>
                <img
                    src="he-man.jpg"
                    alt=""
                />
                <div className={`description-container`}>
                    <span className={`product-name`}>Titulo del Producto</span>
                    <div className={`description-container__price-container`}>
                        <span className={`price`}>$1000</span>
                        <span className={`discount`}>Oferta </span>
                        <span className={`discount`}>90%</span>
                    </div>
                    <div className={`rise-text`}>
                        <span>Texto emergente</span>
                    </div>
                </div>
            </div>
            ...continuan divs para replicar las tarjetas...
    </Slider>
  </div>
  );

CSS

.slider{
  width: 90vw;
  margin: 0 auto;
}
img{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 100%;
}
.card{
  background-color: white;
  -webkit-box-shadow: 0px 0px 4px 0px #000000; 
  box-shadow: 0px 0px 4px 0px #000000;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  font-size: 2rem;
  transition: 1s;
  margin: 1rem;
  width: 25px;
  margin-right: 100px;
}
.favorite-brand{
  display: none;
  position: absolute;
  font-size: 5rem;
  cursor: pointer;
}
.description-container{
  display: inline-block;
  flex-direction: column;
  /* padding: 0.5rem; */
}
.description-container__price-container{
  flex-direction: row;
}
.product-name{
  font-size: 2rem;
}
.price{
  font-size: 3rem;
  font-weight: 500;
  margin-right: 15px;
}
.discount{
  font-size: 1.5rem;
  color: #F00000;
}
.rise-text{
  font-size: 1.3rem;
text-decoration:line-through;
color: gray;
transition: 1s;
background-color: white;
}

Al ejecutar se ve lo siguiente:

introducir la descripción de la imagen aquí

y quisiera que las tarjetas tuvieran una separacion entre ellas como esta:

introducir la descripción de la imagen aquí

De antemano, gracias por sus respuestas, posiblemente este problemo sea mas facil de solucionar de lo que pienso pero es la primera vez que uso una herramienta como react-slick y no se si lo este haciendo correctamente o exista una mejor alternativa.

1 respuesta 1

0

En este enlace estan distintas manera de hacer esto: introducir la descripción del enlace aquí

Basicamente es acceder a clases propias de react-slick-carusel y aplicar la separacion con margenes de esta manera.

  /* the slides */
  .slick-slide {
      margin: 0 27px;
  }

  /* the parent */
  .slick-list {
      margin: 0 -27px;
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.