Matching Heights for Carousel Images

Question

Matching Heights for Carousel Images

My image/video carousel is causing trouble as the content within doesn't maintain a consistent height.

Clicking on the thumbnails highlights a mismatch in the main image heights. Is there a way to ensure that all elements have the same height while keeping it responsive?

(Visuals explaining the issue can be found at links - https://i.sstatic.net/lCmSG.jpg, https://i.sstatic.net/uLQCu.jpg)

For reference, here's the relevant CodePen.

Edit: The goal is to maintain consistent height for the main images displayed in the carousel, not the thumbnails.

javascript jquery html css

Answer 1

Answer №1

The issue has been resolved by adjusting the height of all images to 70vh.

Seems like there is a glitch with StackOverflow Fiddle.

Feel free to have a look at my codepen and confirm if it meets your requirements.

$(document).ready(function() {
  // code here
});

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
/* CSS code here */

<script src="https://scriptsource.com/example.js"></script>
<!-- Additional Scripts -->

<body>

  <div class="slideshow-container">
    <div id="imgDetail">
      <img data-iframe="sketchfab-iframe-1" src="example.jpg" class="chair-class" data-active="true" />
      <img data-iframe="sketchfab-iframe-2" src="example2.jpg" class="chair-class" data-active="false" />
      <img src="example3.jpg" class="chair-class" data-active="false" />

      <!-- Add additional HTML elements here -->
    </div>

    <!-- Thumbnail section -->
    <div id="thumbnails">
    </div>
  </div>
</body>

Answer 2

The issue has been resolved by adjusting the height of all images to 70vh.

Seems like there is a glitch with StackOverflow Fiddle.

Feel free to have a look at my codepen and confirm if it meets your requirements.

$(document).ready(function() {
  // code here
});

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
/* CSS code here */

<script src="https://scriptsource.com/example.js"></script>
<!-- Additional Scripts -->

<body>

  <div class="slideshow-container">
    <div id="imgDetail">
      <img data-iframe="sketchfab-iframe-1" src="example.jpg" class="chair-class" data-active="true" />
      <img data-iframe="sketchfab-iframe-2" src="example2.jpg" class="chair-class" data-active="false" />
      <img src="example3.jpg" class="chair-class" data-active="false" />

      <!-- Add additional HTML elements here -->
    </div>

    <!-- Thumbnail section -->
    <div id="thumbnails">
    </div>
  </div>
</body>

Answer 3

Answer №2

$(document).ready(function () {
    // initiate variables
    var images = $(".chair-class");
    var thumbnailContainer = $("#thumbnails");
    var iframe1 = $('#sketchfab-iframe-1')[0];
    var iframe2 = $('#sketchfab-iframe-2')[0];
    var player1 = $f(iframe1);
    var player2 = $f(iframe2);
    
    // generate thumbnails
    generateThumbnails(images, thumbnailContainer);

    // control arrow listeners
    $(".prev-next-button").on("click", function () {
        // pause videos
        player1.api('pause');
        player2.api('pause');

        // determine next image index
        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;
            } else if (currentImageIndex > 0) {
                nextIndex = currentImageIndex - 1;
            }
        } else {
            if (currentImageIndex === images.length - 1) {
                nextIndex = 0;
            } else if (currentImageIndex < images.length - 1) {
                nextIndex = currentImageIndex + 1;
            }
        }

        // handle active classes for images
        images.removeClass("active").attr('data-active', "false");

        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');
        }
    });

    // Thumbnail click event
    $(".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 to generate thumbnails
    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;
}

/* CSS styles omitted for brevity */

<!-- External libraries/scripts -->
<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>

<!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"/>
    <!-- Other scripts and links here -->
  </head>

  <body id="green-room">

    <div class="slideshow-container">
        <div id="imgDetail">
            <!-- Image details here with corresponding attributes -->

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


</html>

Answer 4

$(document).ready(function () {
    // initiate variables
    var images = $(".chair-class");
    var thumbnailContainer = $("#thumbnails");
    var iframe1 = $('#sketchfab-iframe-1')[0];
    var iframe2 = $('#sketchfab-iframe-2')[0];
    var player1 = $f(iframe1);
    var player2 = $f(iframe2);
    
    // generate thumbnails
    generateThumbnails(images, thumbnailContainer);

    // control arrow listeners
    $(".prev-next-button").on("click", function () {
        // pause videos
        player1.api('pause');
        player2.api('pause');

        // determine next image index
        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;
            } else if (currentImageIndex > 0) {
                nextIndex = currentImageIndex - 1;
            }
        } else {
            if (currentImageIndex === images.length - 1) {
                nextIndex = 0;
            } else if (currentImageIndex < images.length - 1) {
                nextIndex = currentImageIndex + 1;
            }
        }

        // handle active classes for images
        images.removeClass("active").attr('data-active', "false");

        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');
        }
    });

    // Thumbnail click event
    $(".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 to generate thumbnails
    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;
}

/* CSS styles omitted for brevity */

<!-- External libraries/scripts -->
<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>

<!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"/>
    <!-- Other scripts and links here -->
  </head>

  <body id="green-room">

    <div class="slideshow-container">
        <div id="imgDetail">
            <!-- Image details here with corresponding attributes -->

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


</html>

Matching Heights for Carousel Images

Answer №1

Answer №2

Similar questions

Is there a way to eliminate the # sign from hash data using jQuery?

Is it possible to extract the image name from AngularJS and then integrate it into a Laravel blade template?

The requested resource at http://127.0.0.1:8000/storage/profiles/ could not be located (Error 404: Not

Exploring the dynamic duo of MongoDB and GridFS

Personalize the start and end dates of Fullcalendar

The document.write function in JavaScript is malfunctioning

Determine with jQuery whether the img src attribute is null

NodeJS has a knack for replying even before the function has completed

I encountered a PrimeVue error while running a Vue Jest test

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

Unable to perform a default import in Angular 9 version

coding with javascript and css

Distributing information to modules made of Polymer

Oops! Looks like we couldn't locate the request token in the session when attempting to access the Twitter API

"Implement a jQuery fade-in effect following a collective toggle action

Tips on utilizing the identical template in ngIf

I'm looking for a solution to reorganize my current state in order to display the image URL

How to validate a <select> element with parsley.js when it is dynamically populated with an object?

Steps to duplicate a Select input and attach it to a div using Jquery

The Asp button fails to initiate the function