I am trying to create a div with two images inside that you can horizontally scroll through. Each image should be the full size of the div, and upon scrolling to the right you reveal the next image. My issue is that only the right half of the first image is displayed in the div, with the left half of the second image visible next to it. When you scroll you can see the right half of the second image. How can I make it so the entirety of the first image is visible?
.carousel {
height: 74%;
width: 85%;
margin-left: 7.5%;
margin-top: 0.5%;
display: flex;
align-items: center;
justify-content: center;
overflow: scroll;
overflow-y: hidden;
}
.carousel img {
width: 85vw;
height: 74vh;
min-width: 100%;
}<div class="carousel">
<img src="https://via.placeholder.com/600x400">
<img src="https://via.placeholder.com/600x400/dddddd">
</div>>Solution :
The problem is with justify-content: center. Remove that part of the code and it should work. Your code should look like:
.carousel {
height: 74%;
width: 85%;
margin-left: 7.5%;
margin-top: 0.5%;
display: flex;
align-items: center;
overflow: scroll;
overflow-y: hidden;
}
.carousel img {
width: 85vw;
height: 74vh;
min-width: 100%;
}<div class="carousel">
<img src="https://via.placeholder.com/600x400">
<img src="https://via.placeholder.com/600x400/dddddd">
</div>