CODEWITHSUNDEEP
javascripthtmlcssimagecarousel
Brandon Benefield
Brandon Benefield

Reputation: 1672

Image Carousel: Force Images to take up entire div (each image)

I need a way to force each image to fill the div no matter the size of the div. I thought this is what width: 100% was supposed to do but it's not working the way I expected it to.

Link to CodePen

const carousels = document.querySelectorAll('.image-carousel');

[].forEach.call(carousels, c => {
  let next = document.querySelector('.next'),
        prev = document.querySelector('.previous'),
        bubblesContainer = document.querySelector('.bubbles'),
        inner = document.querySelector('.inner'),
        imgs = document.querySelectorAll('img'),
        currentImageIndex = 0,
        width = 100,
        bubbles = [];
  
  for (let i = 0; i < imgs.length; i++) {
    let b = document.createElement('span');
    b.classList.add('bubble');
    bubblesContainer.append(b);
    bubbles.push(b);
    
    b.addEventListener('click', () => {
      currentImageIndex = i;
      switchImg();
    });
  }
  
  function switchImg() {
    inner.style.left = -width * currentImageIndex + '%';
    
    bubbles.forEach(function (b, i) {
      if (i === currentImageIndex) {
        b.classList.add('active');
      } else {
          b.classList.remove('active');
      }
    });
  }
  
  next.addEventListener('click', () => {
    currentImageIndex++;
    
    if (currentImageIndex >= imgs.length) {
      currentImageIndex = 0;
    }
    
    switchImg();
  });
  
  prev.addEventListener('click', () => {
    currentImageIndex--;
    
    if (currentImageIndex < 0) {
      currentImageIndex = imgs.length - 1;
    }
    
    switchImg();
  });
  
  switchImg();
});
img {
  height: 100%;
  min-width: 100%;
}
.image-carousel {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
}
.image-carousel .inner {
  display: flex;
  position: absolute;
  left: 0;
  transition: left 0.5s;
  width: 100%;
  height: 100%;
}
.image-carousel .bubbles {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 5px;
}
.image-carousel .bubbles .bubble {
  margin: 0 1rem 0.5rem;
  background: white;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  display: inline-block;
  opacity: 0.25;
  transition: 0.1s;
  cursor: pointer;
}
.image-carousel .bubbles .bubble:hover {
  opacity: 0.65;
}
.image-carousel .bubbles .bubble.active {
  opacity: 1;
}
.image-carousel .next::after, .image-carousel .previous::after {
  content: '>';
  position: absolute;
  top: 50%;
  right: 0;
  background: white;
  width: 1rem;
  height: 3rem;
  font-weight: bold;
  transform: translatey(-50%);
  line-height: 3rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
  cursor: pointer;
}
.image-carousel .previous::after {
  left: 0;
  content: '<';
}
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="image-carousel">
        <div class="inner">
          <img class="carousel one" src="https://via.placeholder.com/100x100">
          <img class="carousel two" src="https://via.placeholder.com/100x100">
          <img class="carousel three" src="https://via.placeholder.com/100x100">
          <img class="carousel three" src="https://via.placeholder.com/100x100">
        </div>
        <div class="bubbles"></div>
        <div class="previous"><button>&lt;</button></div>
        <div class="next"><button>&gt;</button></div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 49

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

The issue is that you've set the .inner element's display property to flex.

You can remove flex or add flex: 0 0 100% to your images like so:

.inner {
  ..
  img {
    flex: 0 0 100%;
  }
}

flex: 0 0 100% is telling the element inside a flex container to not shrink, or expand, and take up 100% of its parent.

Upvotes: 1

Korovjov
Korovjov

Reputation: 533

You can try adding display:block; min-width: 100%; Min-width forces element to fill parents width.

Upvotes: 1

Related Questions