CODEWITHSUNDEEP
htmlcss
tin_tin
tin_tin

Reputation: 488

Image carousel not working with overflow:hidden

There is something i cannot understand in the below example:

consider two cases below:

  1. I removed <div class="carousel">. In the CSS under when overflow: hidden is commented (in image-container) the transform: translateX(-100%); works fine and displays the 2nd image. But when overflow:hidden is enabled everything goes away.

  2. when <div class="carousel"> is inserted everything works fine.

Please help me to understand the issue. I will extra information if needed.

.carousel {
  overflow: hidden;
  height: 500px;
  width: 500px;
}

.image-container {
  display: flex;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.image-container {
  transform: translateX(-100%);
}

img {
  -o-object-fit: cover;
  object-fit: cover;
  height: 500px;
  width: 500px;
}
<!-- <div class="carousel"> -->
<div class="image-container">
  <img src="https://via.placeholder.com/500x500.png?text=nature-1" alt="" class="one">
  <img src="https://via.placeholder.com/500x500.png?text=nature-2" alt="" class="two">
  <img src="https://via.placeholder.com/500x500.png?text=nature-3" alt="" class="three">
  <img src="https://via.placeholder.com/500x500.png?text=nature-4" alt="" class="four">
  <img src="https://via.placeholder.com/500x500.png?text=nature-5" alt="" class="five">
</div>
<!-- </div> -->

Upvotes: 0

Views: 1071

Answers (2)

robartsd
robartsd

Reputation: 1470

If you set overflow:hidden on the image-container, any image outside of it's dimensions should be hidden. Shifting the container to the side with transform:translateX(-100%) does not change this. The first image would still be visible in the image-container but the whole image container has been shifted out of view.

You could get rid of the outer div by styling .image-container>*{transform:translateX(-100%)} to shift the images themselves within the image container instead of shifting the container. This might lead to slightly more graphics processing overhead for the page as it transforms each image instead of the one container of images, but I can't imagine that this would actually be noticeable.

Upvotes: 2

zovorap
zovorap

Reputation: 88

Not sure why you want to remove .carousel. IMO it should wrap your .image-container and .image-container should not have overflow: hidden. Try to add borders to .carousel - border: 1px solid red; and see where your .image-container is relative to .carousel.

Upvotes: 1

Related Questions