CarouFredSel plugin adjusting height to a low pixel?

See more:

jQuery

That's the design in question.

Here is my jQuery:

$().ready(function() {
	// Using custom configuration
    $('#main-carousel').carouFredSel({
        items               : 2,
        direction           : "left",
        responsive          : true,
        width               : '100%',
        height              : 'auto',
        scroll : {
            items           : 1,
            easing          : "elastic",
            duration        : 1000,                         
            pauseOnHover    : true
        }
    });
});

My HTML:

<!-- CAROUSEL -->
<div class="row carousel">
    <div class="col-sm-12">
        <script type="text/javascript" src="<?php echo __ASSET_PATH__ ?>/js/jquery.carouFredSel.min.js"></script>
        <script type="text/javascript" src="<?php echo __ASSET_PATH__ ?>/js/jcarousel.js"></script>
        <div id="main-carousel">

            <div>
                <img src="<?php echo __ASSET_PATH__ ?>/img/swaf-hero-bus.jpg" alt="SWAF-hero-bus" title="" />

                <span class="content">Learn About Fleet Refinish<span class="action"> </span></span>

            </div>

            <div>
                <img src="<?php echo __ASSET_PATH__ ?>/img/swaf-hero-bus.jpg" alt="SWAF-hero-bus" title="" />

                <span class="content">Learn About Fleet Refinish<span class="action"> </span></span>

            </div>

        </div>
    </div>
</div> <!-- END .CAROUSEL -->

I have no CSS on it.. I don't understand why it's minimizing it to 40px through the plugin itself. The height will adjust since this layout is responsive. So it could minimize or maximize so I don't want to set a defined height in particular..

Any ideas?