Creating a Bootstrap carousel that shows preview of previous and next image and handles landscape and portrait photos

Question

I currently have a carousel that shows 1/3 of the previous and next photo. It has a set height and will show a portion of the featured image to fit into that height.

$('.carousel-item', '.multi-item-carousel').each(function(){
  var next = $(this).next();
  if (! next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
}).each(function(){
  var prev = $(this).prev();
  if (! prev.length) {
    prev = $(this).siblings(':last');
  }
  prev.children(':nth-last-child(2)').clone().prependTo($(this));
});

// Carousel CSS 
.multi-item-carousel {
  overflow: hidden;
}

.multi-item-carousel .carousel-indicators {
  margin-right: 25%;
  margin-left: 25%;
}

.multi-item-carousel .carousel-control-prev,
.multi-item-carousel .carousel-control-next {
  background: rgba(255, 255, 255, 0.3);
  width: 25%;
  z-index: 11;
  /* .carousel-caption has z-index 10 */
}

.multi-item-carousel .carousel-inner {
  width: 150%;
  left: -25%;
}

.multi-item-carousel .carousel-item-next:not(.carousel-item-left),
.multi-item-carousel .carousel-item-right.active {
  -webkit-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}

.multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
.multi-item-carousel .carousel-item-left.active {
  -webkit-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}

.multi-item-carousel .item__third {
  float: left;
  position: relative;
  width: 33.33333333%;
}

.multi-item-carousel img {
  width: 33.333333%;
  height: 50vh;
  max-height: 50vh;
  object-fit: cover;
}

//

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example</title>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


  <body>
  <div class="container">
    <div class="bd-example">
      <div id="carouselExampleCaptions" class="carousel slide multi-item-carousel" data-ride="carousel">

        <div class="carousel-inner">

          <div class="carousel-item active">
            <div class="item__third">
              <img src="https://images.pexels.com/photos/2253870/pexels-photo-2253870.jpeg" class="d-block w-100" />
            </div>
          </div>

          <div class="carousel-item">
            <div class="item__third">
              <img src="https://images.pexels.com/photos/3916019/pexels-photo-3916019.jpeg" class="d-block w-100" />
            </div>
          </div>
          
          <div class="carousel-item">
            <div class="item__third">
              <img src="https://images.pexels.com/photos/3014856/pexels-photo-3014856.jpeg" class="d-block w-100" />
            </div>
          </div>


        </div>

        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>

      </div>
    </div>
    </div>
  </body>

This doesn't work well for a mix of portrait and landscape photos. I've tried showing the full height of the portrait photos but that puts an awkward gap between photos. Is there a way to keep the photos continuous, while showing the entirety of the portrait photos? Essentially I want to use the image before and after to fill the gap by shifting them inward to meet the edges of the active photo.

Creating a Bootstrap carousel that shows preview of previous and next image and handles landscape and portrait photos

0 Answers0