I'm facing a frustrating issue with my app. I have implemented a picture carousel and now I want to add navigation arrows on either side of the image. Despite using flexbox for my page layout, I am unable to achieve the desired result. Many suggestions I found online recommend using position: absolute, but this approach lacks responsiveness. As my design is focused on mobile-first, any slight increase in width causes the arrow positions to go haywire, leading to a need for numerous media queries to maintain responsiveness.
Below is the React code snippet:
<div className="dashboard">
<div className="left-right-btn">
<div className='left_button'>
<button className="left-btn btn" onClick={this.prevPicture}>{'<'}
</button>
</div>
<div className='right_button'>
<button className="right-btn btn" onClick={this.nextPicture}>{'>'}
</button>
</div>
</div>
<div className="dashboard-pic">
<div className="picture-name">{userName}</div>
<div className="picture-carousel">
<Link to={`/profile/${userId}`}><img src={userPic} alt=''/></Link>
</div>
<div className='eventify_link_button'>
{this.renderEventifyButton()}
</div>
</div>
</div>
CSS styling used:
.dashboard {
display: flex;
position: relative;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
padding-bottom: 30px;
}
.dashboard-pic {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
padding-top: 5%;
}
.picture-carousel {
min-width:L 0;
margin: 5px;
}
.picture-carousel img {
width:300px;
max-width: 100%;
max-height: 300px
}
.left-right-btn {
position: relative;
}
.left_button {
position: absolute;
left: -140px;
top: 14em;
}
.right_button{
position: absolute;
right: -140px;
top: 14em;
}
The current mobile view displays the navigation arrows using position: absolute. However, I aim to maintain this layout regardless of the screen width.