this is my sass and html code.
i would like to know why my caroulsel images moves to left when i resize the window can anyone help me ? i have search multiple stackoverflow but couldnt find the answer for it. somehow the image doesnt resize acordingly and moves to left . i would like to know how can i keep the image on the same position when reisizng the window.
.carousel-wrapper {
position: relative;
// margin: auto;
border: 4px solid red;
overflow: hidden;
//ul
.facebook_album_list {
display: flex;
.album_list_item {
min-width: 100%;
a {
img {
width: 100%;
aspect-ratio: 16/9;
max-height: 300px;
}
}
}
}
.carousel_button {
position: absolute;
z-index: 2;
height: 100%;
cursor: pointer;
display: grid;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
&:hover {
.fa-solid {
transform: scale(1.2);
}
}
.fa-solid {
font-size: 1rem;
padding: 1rem;
border-radius: 50%;
transform: scale(1);
background-color: rgb(212, 88, 0);
}
}
#previousbtn {
left: 0;
}
#nextbtn {
right: 0;
}
}<div class="carousel-wrapper" aria-label="Photo gallery" data-carousel>
<ul class="facebook_album_list album_list" data-carousel-list>
<li class="album_list_item slide_item" data-carousel-list-item>
<a href="">
<img class="album_list_item_img" data-carousel-img src="" loading="lazy">
</a>
</li>
<li class="album_list_item slide_item" data-carousel-list-item>
<a href="">
<img class="album_list_item_img" data-carousel-img src="" loading="lazy">
</a>
</li>
<li class="album_list_item slide_item" data-carousel-list-item>
<a href="">
<img class="album_list_item_img" data-carousel-img src="" loading="lazy">
</a>
</li>
</ul>
</div>