Using different sized carusel each page in wordpress

could you please guide me how to get a solution to my problem. Here is my dev url and as you can see there is a full page slider welcomes you on the front page. I would like this carousel to only stay full size on the front page, so i have a check to call header as follows:

if ( is_page( 'front-page' ) ) {
get_header();
} elseif ( is_page() ) {
get_header();
} else {
    get_header(small);
}

and here is my header-small.php:

<!-- HERO -->
        <div class="row-fluid fill">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <?php
                $the_query = new WP_Query(array(
                    'category_name' => 'Home Slider',
                    'posts_per_page' => 1
                ));
                while ($the_query->have_posts()) :
                    $the_query->the_post();
                    ?>
                <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-img' );?>
                    <div class="item active" style="background:url('<?php echo $thumb['0'];?>') no-repeat center center fixed ">

                        <div class="carousel-caption">
                            <h1><?php the_title(); ?></h1>
                            <p><?php the_excerpt(); ?></p>
                             <p><a href="<?php echo the_permalink(); ?>"><button type="button" class="btn btn-primary">Read more</button></p></a>
                        </div>
                    </div><!-- item active -->
                    <?php
                endwhile;
                wp_reset_postdata();
                ?>
                <?php
                $the_query = new WP_Query(array(
                    'category_name' => 'Home Slider',
                    'posts_per_page' => 5,
                    'offset' => 1
                ));
                while ($the_query->have_posts()) :
                    $the_query->the_post();
                    ?>
                    <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-img' );?>
                    <div class="item fill" style="background:url('<?php echo $thumb['0'];?>') no-repeat center center fixed ">

                        <div class="carousel-caption">
                            <h1><?php the_title(); ?></h1>
                            <p><?php the_excerpt(); ?></p>
                            <p><a href="<?php echo the_permalink(); ?>"><button type="button" class="btn btn-primary">Read more</button></p></a>
                        </div>
                    </div><!-- item -->
                    <?php
                endwhile;
wp_reset_postdata();
                ?>
            </div><!-- carousel-inner -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div><!-- #myCarousel -->

and js in footer.php

<script>
        $('.carousel').carousel();
        </script>

The image class="slider-img" is the right size for the image thumbnail, however for some reason it breaks the whole appearance when I have tried to change CSS classes and resize them in the CSS file (instead of 100% height i changed it to 30%). I thought because i should add another js line with the different class,but i did not seem to get it right…

Could you please guide me through this? Much appreciated…
url is: http://www.bridge.neshdesign.com/offers/ where you can see that the image is rendering properl, however the carousel in the “hero” section doesnt.