0

estoy haciendo un carousel y tengo las siguientes flechas en la imagen que son las que cambian de imágenes, pero estoy tratando de acomodarlas en su lugar y que a su vez se auto ajusten(responsive)

introducir la descripción de la imagen aquí

Este es mi div donde tengo las imagenes

<div className="arrows">
          <img
            onClick={() =>
              selected === 0
                ? setSelected(sLength - 1)
                : setSelected((prev) => prev - 1)
            }
            src={LeftArrow}
            alt=""
          />
          <img
            onClick={() =>
              selected === sLength - 1
                ? setSelected(0)
                : setSelected((prev) => prev + 1)
            }
            src={RightArrow}
            alt=""
          />
        </div>

Y el CSS con el que he estado probando es el siguiente

.arrows {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transform: translate( -50%, -50% );
  position: absolute;
  bottom: 42%;
  left:54.5%;
  gap: 97%;
}
.arrows > :first-child{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7482%) hue-rotate(19deg) brightness(118%) contrast(93%); 
}

.arrows > img {
  width: 1.5vw;
  height: 1.5vw;
  cursor: pointer;
}

He estado investigando y he visto que use porcentajes, que use tamaños como vw pero pues solo he logrado hacer el diseño responsive en pantallas móvil, para las otras pantallas las flechas se desajustan.

1
  • Tienes posibilidad de usar algún FW como Boostrap?
    – OCHOA
    Commented el 7 ene. 2023 a las 18:02

1 respuesta 1

0

Todas las imágenes en un documento HTML deben ser con un width: 100% y height: 100% junto con object-fit: cover; y lo que hay que modificar y ajustar es su contenedor padre.

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

En este caso el contenedor padre es arrow.

  1. El display: flex por defecto tiene la dirección horizontal y no necesita flex-direction: row.
  2. Debe tener un ancho fijo (por lo menos un max-width) y con la medida de vw; y un alto especifico (de por lo menos max-height) con la medida de vh
.arrows {
  display: flex;
  width: 1.5vw;
  height: 1.5vh;
  justify-content: center;
  align-items: center;
  transform: translate( -50%, -50% );
  position: absolute;
  bottom: 42%;
  left:54.5%;
  gap: 97%;
}

Recomiendo que no uses la medida vw y vh sino rem o em para estos casos. El resto sería trabajarlo bien adaptando a tu estilo y requerimiento.

1
  • Entiendo. Ya las arrows redimensionan cada vez que cambia la pantalla pero el problema que tengo ahora es que al realizar el gap de las arrows. Como te puedes fijar en la imagen de la pregunta tengo las arrows separadas, pero al ir revisando otras resoluciones no se ajustan bien Commented el 8 ene. 2023 a las 16:00

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.