CODEWITHSUNDEEP
css
FishKing
FishKing

Reputation: 59

Why are Those things different with CSS overflow hidden?

Everything is okay except "the overflow".

When I put "overflow : hidden" in 'image-container', It s not work like sequential carousel.

But when I put "overflow : hidden" in 'carousel', It s work like sequential carousel.

I don't know what's the different with those things and Why is this happened?

let imgs = document.querySelector('.image-container');
let img = document.querySelectorAll('.image-container img');

let idx = 0;

function slideShow() {
  idx++;

  if (idx > img.length - 1) {
    idx = 0;
  }

  imgs.style.transform = `translateX(${-idx*300}px)`;

}

setInterval(slideShow, 2000);
.carousel {
  /*overflow: hidden;*/
}

.image-container {
  overflow: hidden;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  height: 300px;
  width: 300px;
  display: flex;
}

img {
  object-fit: cover;
  height: 300px;
  width: 300px;
}
<div class="carousel">
  <div class="image-container">
    <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80" alt="" />
    <img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="" />
    <img src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="" />
    <img src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80" alt="" />
  </div>
</div>

Upvotes: 1

Views: 66

Answers (1)

Shivam Bhatia
Shivam Bhatia

Reputation: 62

If you set {overflow: hidden} to {image-container} then that means anything that is beyond the specified width of that container will be hidden. So either you could increase the width of the {image-container}

.image-container {
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    height: 300px;
    width: 1000px;
    display: flex;
  }

or you could use

.carousel {
    overflow: hidden;
  }

Upvotes: 1

Related Questions