Question

I have a carousel that will contain images with the same width but different height. I am unsure how I would adapt my existing code to fit this requirement without resorting to JS. I also want to note that I have content surrounding this carousel on all sides.

Currently, I have hard coded height:390px; in .slides. I have tried changing this to height:auto; but it forced all of the content below the carousel to move up ~375px (I have given my pagination a height of 15px).

HTML:

<div id="carousel">
    <div class="slides">
        <div id="slide1" class="slide opaque">
            <img src="http://www.placehold.it/630x390">
            <div class="content">
                <div class="text">Slide01</div>
            </div>
        </div>
        <div id="slide2" class="slide">
            <img src="http://www.placehold.it/630x390">
            <div class="content">
                <div class="text">Slide01</div>
            </div>
        </div>
        <div id="slide3" class="slide">
            <img src="http://www.placehold.it/630x390">
            <div class="content">
                <div class="text">Slide01</div>
            </div>
        </div>
    </div>
    <ul class="pagination">
        <li id="pag-slide1" class="pag selected"></li>
        <li id="pag-slide2" class="pag"></li>
        <li id="pag-slide3" class="pag"></li>
    </ul>
</div> 

CSS/LESS:

#carousel {
    -moz-box-shadow: 0 2px 4px #777;
    -webkit-box-shadow: 0 2px 4px #777;
    box-shadow: 0 2px 4px #777;
    width: 630px;

    div.slides {
        position: relative; 
        float: left; 
        display: block; 
        width: 100%;
        height: 390px;
        margin: 0; 

        .slide {
            position: absolute; 
            left: 0; 
            -webkit-transition: opacity 1s ease-in-out;
            -moz-transition: opacity 1s ease-in-out; 
            -o-transition: opacity 1s ease-in-out; 
            -ms-transition: opacity 1s ease-in-out; 
            transition: opacity 1s ease-in-out; 
            opacity: 0; 
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
            filter: alpha(opacity=0); 

            img {
                border-top-left-radius:5px 5px;
                border-top-right-radius:5px 5px;
                border-bottom-left-radius:5px 5px;
                border-bottom-right-radius:5px 5px;
            }

            .content {
                color: white;
                font-weight: bold;
                z-index: 10;
                position: absolute;

                bottom: 40px;
                width: 100%;
                text-align: center;


                .text {
                    padding: 0 0 20px 0;
                }
            }
        }

        .slide.opaque, .slide.tempOpaque {
            opacity: 1; 
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; 
            filter: alpha(opacity=1);
        }   
    }

    ul.pagination { 
        padding: 0;
        margin: 0 auto;
        width: 200px;
        text-align: center;
        list-style-type: none; 
        position: relative; 
        top: -25px; 
        z-index: 9; 

        .pag {
            width: 15px; 
            height: 15px; 
            background: url(images/pagination.png) 0 0 no-repeat;
            position: relative; 
            display: inline-block; 
            margin: 0; 
            padding: 0;

            cursor: hand; cursor: pointer;
        }

        .pag.selected { 
            background:url(images/pagination.png) 0 -16px no-repeat;
        }
    }
}

JS:

$(document).ready(function() {
    slidesArray = new Array();
    loadArray(slidesArray, 'slide', '#carousel .slides .slide');
    $("#carousel .pagination .pag").click(function() {
        var nextSlide = $(this).attr("id").replace("pag-slide", "");    
        animateTransition(nextSlide);
    });
    var slideTimer = setInterval(function() {
        fadeToNextSlide()
    }, 5000 );
});

function loadArray(array, prefix, path) {
    $(path).each(function(index) {
        array.push(prefix + (index + 1));
    });
}
function animateTransition(nextSlide) {
    $("#carousel .slides .opaque").addClass('tempOpaque');
    $("#carousel .slides .slide").removeClass("opaque");
    setTimeout(function(){
        $('#carousel .slides .slide.tempOpaque').removeClass('tempOpaque');
    },300);
    $("#carousel .slides #slide" + nextSlide).addClass("opaque");
    $("#carousel .pagination .pag").removeClass("selected");
    $('#carousel #pag-slide' + nextSlide).addClass("selected");   
}
function fadeToNextSlide() {
    var currentSlide = $('#carousel .slides .opaque').attr('id');
    var nextSlide = $.inArray(currentSlide, slidesArray) + 2;
    if (nextSlide > slidesArray.length) {
        nextSlide = 1;
    }
    animateTransition(nextSlide);
}

Answer 1

By updating your animateTransition function to check the image height first (by creating a hidden image element and checking the height of that), you can determine and set the height of the .slides div. Simply add this bit into that function:

$('body').append('<img style="position:absolute;top:0px;left:0px;visibility:hidden;" id="imgheight" src="'+$("#carousel .slides #slide" + nextSlide + ' img').attr('src')+'"/>');
var theheight=$('#imgheight').height();
$('#imgheight').remove();
$('.slides').height(theheight);

JsFiddle example: http://jsfiddle.net/QvZLg/4/
(if you inspect the element you’ll see that the height of the .slides div is set every time the image changes.)

Happy Coding 🙂