Carousel Images Same Height

Question

I have an image/video carousel and I'm having trouble keeping all the content in the carousel the same height.

When you click on the thumbnails, the main image heights don't match up.

How do I keep everything the same height, yet responsive at the same time?

(I added some pictures to show what I mean)

Here's the codepen.

Edit: I want to keep the main images shown in the carousel the same height, not the thumbnails.

$(document).ready(function() {
  // get all images loaded
  var images = $(".chair-class");
  // thumbnails containers
  var thumbnailContainer = $("#thumbnails");
  var iframe1 = $('#sketchfab-iframe-1')[0];
  var iframe2 = $('#sketchfab-iframe-2')[0];
  var player1 = $f(iframe1);
  var player2 = $f(iframe2);
  // generate thumbnail images
  generateThumbnails(images, thumbnailContainer);
  // listeners for controls arrows
  $(".prev-next-button").on("click", function() {
    player1.api('pause');
    player2.api('pause');
    // get the images
    var currentImageIndex = images.index($(".chair-class[data-active=true]"));
    var isPrevious = $(this).hasClass("previous");
    var nextIndex;
    if (isPrevious) {
      if (currentImageIndex === 0) {
        nextIndex = images.length - 1;
      }

      if (currentImageIndex > 0) {
        nextIndex = currentImageIndex - 1;
      }
    } else {
      if (currentImageIndex === images.length - 1) {
        nextIndex = 0;
      }

      if (currentImageIndex < images.length - 1) {
        nextIndex = currentImageIndex + 1;
      }
    }

    // remove any active class from images
    images.removeClass("active").attr('data-active', "false");
    // get the next active image and add active class to that next current image
    var $nextImage = $(images[nextIndex]);
    var iframeId = $nextImage.data('iframe');
    if (iframeId) {
      $(images[nextIndex]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      $(images[nextIndex]).addClass("active").attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  $(".thumb").on("click", function(event) {
    event.preventDefault();
    var images = $(".chair-class");
    var indexSelected = $(this).data("img-index");
    var currentShown = images.index($(".chair-class[data-active=true]"));
    if (currentShown === indexSelected) return false;
    player1.api('pause');
    player2.api('pause');
    images.removeClass("active").attr('data-active', "false");
    var iframeId = $(this).data('iframe');
    if (iframeId) {
      $(images[indexSelected]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      images.removeClass("active");
      $(images[indexSelected]).addClass('active').attr('data-active', "true");;
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  function generateThumbnails(images, container) {
    var ul = $("<ul>");
    images.each(function(index, element) {
      var currentThumb = $("<img>");
      var li = $("<li>");
      var src = $(this).attr("src");
      currentThumb.attr("src", src);
      currentThumb.attr("class", "thumb");
      currentThumb.data("img-index", index);
      var iframe = $(this).data('iframe');
      if (iframe) {
        currentThumb.data("iframe", iframe);
      }
      li.append(currentThumb);
      ul.append(li);
    });
    container.append(ul);
  }
});

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}


/* #green-room {
    background: #333 !important;
  } */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

#chair,
.chair-class {
  position: absolute;
  width: 100%;
  height: auto;
  max-width: 600px;
  max-height: 400px;
  margin: 0 auto;
  display: block;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}

.chair-class.active {
  position: relative;
  opacity: 1;
}

#prev {
  position: absolute;
  color: black;
  left: 0;
  top: 0;
  bottom: 0;
}

#next {
  position: absolute;
  color: black;
  right: 0;
  top: 0;
  bottom: 0;
}

#prev p,
#next p {
  font-size: 3em;
}

#imgDetail {
  position: relative;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

#imgDetail a {
  text-decoration: none;
  display: flex;
  padding: 3%;
  justify-content: center;
  align-items: center;
}

#imgDetail a:hover {
  background-color: #333;
  color: white;
  opacity: 0.5;
}

#imgDetail ul {
  margin: 0 auto;
  display: block;
}

#thumbnails {
  max-width: 1000px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.thumb {
  width: 21%;
  height: auto;
  margin-top: 15px;
  cursor: pointer;
}

#imgDetail li {
  display: inline;
}

#thumbnails ul {
  margin: 0 auto;
  display: block;
}

#thumbnails li {
  display: inline;
  padding-right: 2%;
}

#thumbnails li:last-child {
  padding-right: 0;
}

.sketchfab-iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40vw;
}

.sketchfab-iframe {
  opacity: 0;
  margin: 0 auto;
  transition: opacity .5s;
  display: none;
}

.sketchfab-iframe.active {
  opacity: 1;
  position: relative;
  display: block;
}

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Daniel Pollack</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  </script>
  <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
  </script>
</head>

<body id="green-room">

  <div class="slideshow-container">
    <div id="imgDetail">
      <img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
      <img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
      <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <!--CONTROLS-->
      <a href="javascript:void(0)" id="prev" class="prev-next-button previous">
        <p>&#10092;</p>
      </a>
      <a href="javascript:void(0)" id="next" class="prev-next-button next">
        <p>&#10093;</p>
      </a>
    </div>

    <!--Thumbnails-->
    <div id="thumbnails">
    </div>


</html>

Possible duplicate of [making two responsive images the same height](https://stackoverflow.com/questions/35173687/making-two-responsive-images-the-same-height) — Peter B, May 04 '18 at 14:20

Dhaval Jardosh · Accepted Answer · 2018-05-04T14:34:12.367

It's fixed by setting all the image height to 70vh.

Guess something is not working with StackOverflow Fiddle.

Check my codepen and let me know if that's what you are looking for.

$(document).ready(function() {
  // get all images loaded
  var images = $(".chair-class");
  // thumbnails containers
  var thumbnailContainer = $("#thumbnails");
  var iframe1 = $('#sketchfab-iframe-1')[0];
  var iframe2 = $('#sketchfab-iframe-2')[0];
  var player1 = $f(iframe1);
  var player2 = $f(iframe2);
  // generate thumbnail images
  generateThumbnails(images, thumbnailContainer);
  // listeners for controls arrows
  $(".prev-next-button").on("click", function() {
    player1.api('pause');
    player2.api('pause');
    // get the images
    var currentImageIndex = images.index($(".chair-class[data-active=true]"));
    var isPrevious = $(this).hasClass("previous");
    var nextIndex;
    if (isPrevious) {
      if (currentImageIndex === 0) {
        nextIndex = images.length - 1;
      }

      if (currentImageIndex > 0) {
        nextIndex = currentImageIndex - 1;
      }
    } else {
      if (currentImageIndex === images.length - 1) {
        nextIndex = 0;
      }

      if (currentImageIndex < images.length - 1) {
        nextIndex = currentImageIndex + 1;
      }
    }

    // remove any active class from images
    images.removeClass("active").attr('data-active', "false");
    // get the next active image and add active class to that next current image
    var $nextImage = $(images[nextIndex]);
    var iframeId = $nextImage.data('iframe');
    if (iframeId) {
      $(images[nextIndex]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      $(images[nextIndex]).addClass("active").attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  $(".thumb").on("click", function(event) {
    event.preventDefault();
    var images = $(".chair-class");
    var indexSelected = $(this).data("img-index");
    var currentShown = images.index($(".chair-class[data-active=true]"));
    if (currentShown === indexSelected) return false;
    player1.api('pause');
    player2.api('pause');
    images.removeClass("active").attr('data-active', "false");
    var iframeId = $(this).data('iframe');
    if (iframeId) {
      $(images[indexSelected]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      images.removeClass("active");
      $(images[indexSelected]).addClass('active').attr('data-active', "true");;
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  function generateThumbnails(images, container) {
    var ul = $("<ul>");
    images.each(function(index, element) {
      var currentThumb = $("<img>");
      var li = $("<li>");
      var src = $(this).attr("src");
      currentThumb.attr("src", src);
      currentThumb.attr("class", "thumb");
      currentThumb.data("img-index", index);
      var iframe = $(this).data('iframe');
      if (iframe) {
        currentThumb.data("iframe", iframe);
      }
      li.append(currentThumb);
      ul.append(li);
    });
    container.append(ul);
  }
});

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}


/* #green-room {
    background: #333 !important;
  } */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

#chair,
.chair-class {
  position: absolute;
  width: auto;
  height: 100%;
  /*     max-width: 600px;
    max-height: 400px; */
  margin: 0 auto;
  display: block;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}

.chair-class.active {
  position: relative;
  opacity: 1;
}

#prev {
  position: absolute;
  color: black;
  left: 0;
  top: 0;
  bottom: 0;
}

#next {
  position: absolute;
  color: black;
  right: 0;
  top: 0;
  bottom: 0;
}

#prev p,
#next p {
  font-size: 3em;
}

#imgDetail {
  position: relative;
  width: 90%;
  margin: 0 auto;
  height: 70vh;
  overflow: hidden;
}

#imgDetail img {
  height: 70vh;
}

#imgDetail a {
  text-decoration: none;
  display: flex;
  padding: 3%;
  justify-content: center;
  align-items: center;
}

#imgDetail a:hover {
  background-color: #333;
  color: white;
  opacity: 0.5;
}

#imgDetail ul {
  margin: 0 auto;
  display: block;
}

#thumbnails {
  max-width: 1000px;
  display: inline-block;
  text-align: center;
}

.thumb {
  width: 21%;
  height: auto;
  margin-top: 15px;
  cursor: pointer;
}

#imgDetail li {
  display: inline;
}

#thumbnails ul {
  margin: 0 auto;
  display: block;
}

#thumbnails li {
  display: inline;
  padding-right: 2%;
}

#thumbnails li:last-child {
  padding-right: 0;
}

.sketchfab-iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*   top:10vh; */
  height: 70vh;
  opacity: 0;
  margin: 0 auto;
  transition: opacity .5s;
  display: none;
}

.sketchfab-iframe.active {
  opacity: 1;
  position: relative;
  display: block;
}

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->

<body>

  <div class="slideshow-container">
    <div id="imgDetail">
      <img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
      <img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
      <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <!--CONTROLS-->
      <a href="javascript:void(0)" id="prev" class="prev-next-button previous">
        <p>&#10092;</p>
      </a>
      <a href="javascript:void(0)" id="next" class="prev-next-button next">
        <p>&#10093;</p>
      </a>
    </div>

    <!--Thumbnails-->
    <div id="thumbnails">
    </div>
  </div>
</body>

score 0 · Answer 2 · answered May 04 '18 at 14:03

$(document).ready(function () {
    // get all images loaded
    var images = $(".chair-class");
    // thumbnails containers
    var thumbnailContainer = $("#thumbnails");
    var iframe1 = $('#sketchfab-iframe-1')[0];
    var iframe2 = $('#sketchfab-iframe-2')[0];
    var player1 = $f(iframe1);
    var player2 = $f(iframe2);
    // generate thumbnail images
    generateThumbnails(images, thumbnailContainer);
    // listeners for controls arrows
    $(".prev-next-button").on("click", function () {
        player1.api('pause');
        player2.api('pause');
        // get the images
        var currentImageIndex = images.index($(".chair-class[data-active=true]"));
        var isPrevious = $(this).hasClass("previous");
        var nextIndex;
        if (isPrevious) {
            if (currentImageIndex === 0) {
                nextIndex = images.length - 1;
            }

            if (currentImageIndex > 0) {
                nextIndex = currentImageIndex - 1;
            }
        } else {
            if (currentImageIndex === images.length - 1) {
                nextIndex = 0;
            }

            if (currentImageIndex < images.length - 1) {
                nextIndex = currentImageIndex + 1;
            }
        }

        // remove any active class from images
        images.removeClass("active").attr('data-active', "false");
        // get the next active image and add active class to that next current image
        var $nextImage = $(images[nextIndex]);
        var iframeId = $nextImage.data('iframe');
        if (iframeId) {
            $(images[nextIndex]).attr('data-active', "true");
            $('.sketchfab-iframe').removeClass('active');
            $('#' + iframeId).addClass('active');
        } else {
            $(images[nextIndex]).addClass("active").attr('data-active', "true");
            $('.sketchfab-iframe').removeClass('active');
        }
    });

    $(".thumb").on("click", function (event) {
        event.preventDefault();
        var images = $(".chair-class");
        var indexSelected = $(this).data("img-index");
        var currentShown = images.index($(".chair-class[data-active=true]"));
        if (currentShown === indexSelected) return false;
        player1.api('pause');
        player2.api('pause');
        images.removeClass("active").attr('data-active', "false");
        var iframeId = $(this).data('iframe');
        if (iframeId) {
            $(images[indexSelected]).attr('data-active', "true");
            $('.sketchfab-iframe').removeClass('active');
            $('#' + iframeId).addClass('active');
        } else {
            images.removeClass("active");
            $(images[indexSelected]).addClass('active').attr('data-active', "true");;
            $('.sketchfab-iframe').removeClass('active');
        }
    });

    function generateThumbnails(images, container) {
        var ul = $("<ul>");
        images.each(function (index, element) {
            var currentThumb = $("<img>");
            var li = $("<li>");
            var src = $(this).attr("src");
            currentThumb.attr("src", src);
            currentThumb.attr("class", "thumb");
            currentThumb.data("img-index", index);
            var iframe = $(this).data('iframe');
            if (iframe) {
                currentThumb.data("iframe", iframe);
            }
            li.append(currentThumb);
            ul.append(li);
        });
        container.append(ul);
    }
});

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

/* #green-room {
    background: #333 !important;
  } */

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

#chair, .chair-class {
    position: absolute;
    width: 80%;
    height: auto;
    max-width: 600px;
    max-height: 400px;
    margin: 0 auto;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .5s;
}

.chair-class.active {
    position: relative;
    opacity: 1;
}

#prev {
    position: absolute;
    color: black;
    left: 0;
    top: 0;
    bottom: 0;
}

#next {
    position: absolute;
    color: black;
    right: 0;
    top: 0;
    bottom: 0;
}

#prev p, #next p {
    font-size: 3em;
}

#imgDetail {
    position: relative;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

#imgDetail a {
    text-decoration: none;
    display: flex;
    padding: 3%;
    justify-content: center;
    align-items: center;
}

#imgDetail a:hover {
    background-color: #333;
    color: white;
    opacity: 0.5;
}

#imgDetail ul {
    margin: 0 auto;
    display: block;
}

#thumbnails {
    max-width: 1000px;
    width: 100%;
    display: inline-block;
    text-align: center;
}

.thumb {
    width: 21%;
    height: 120px;
    margin-top: 15px;
    cursor: pointer;
}

#imgDetail li {
    display: inline;
}

#thumbnails ul {
    margin: 0 auto;
    display: block;
}

#thumbnails li {
    display: inline;
    padding-right: 2%;
}

#thumbnails li:last-child {
    padding-right: 0;
}

.sketchfab-iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40vw; 
}

.sketchfab-iframe {
    opacity: 0;
    margin: 0 auto;
    transition: opacity .5s;
    display: none;
}

.sketchfab-iframe.active {
    opacity: 1;
    position: relative;
    display: block;
}

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Daniel Pollack</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js">     </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">       </script>
    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
  </script>
  </head>

  <body id="green-room">

    <div class="slideshow-container">
        <div id="imgDetail">
            <img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
            <img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
            <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />

            <div class="aspect-ratio">
                <iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>

            <div class="aspect-ratio">
                <iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>

            <!--CONTROLS-->
            <a href="javascript:void(0)" id="prev" class="prev-next-button previous">
                <p>&#10092;</p>
            </a>
            <a href="javascript:void(0)" id="next" class="prev-next-button next">
                <p>&#10093;</p>
            </a>
        </div>

        <!--Thumbnails-->
        <div id="thumbnails">
        </div>


</html>

Carousel Images Same Height

2 Answers2