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)
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.