Карусель Bootstrap разваливается при полной загрузке страницы

Question

Я работаю над темой, в которой используется как metro ui, так и bootstrap. Карусель рушится при полной перезагрузке страницы, а также при добавлении нового слайда.

Вот изображение слайдера, сделанное при частичной загрузке страницы:

Это полное изображение слайдера, сделанное с частично загруженной страницей

Вот изображение слайдера в свернутом виде:

Взгляните на свернутый слайдер

Вот кодировка слайдера:

    <div id="myCarousel" class="carousel slide" >

            <!-- Wrapper for carousel items -->

            <div class="carousel-inner" >


                <?php
                $loop = new WP_Query(
                        array(
                            'post_type' => 'NewSlider',
                            'order_by' => 'post_id',
                            'order' => 'ASC'
                        )
                );

                ?>



                <?php

                    while($loop->have_posts()) { $loop->the_post();


                    $firsttitle = get_post_meta( $post->ID, 'first_heading', true);

                    $maintitle = get_post_meta( $post->ID, 'second_heading', true);

                    ?>




                    <div class="item<?php if( $loop->current_post == 0 && !is_paged() ) : ?> active <?php endif; ?>">

                        <div class="firstslide col-sm-3">

                            <img class="ib brick img-responsive animated fadeInLeft" src="<?php  echo get_template_directory_uri().'/assets/img/slide-title-border.png'; ?>" alt="brick">

                            <h2 class="ib animated fadeInDown" ><?php echo($firsttitle); ?></h2>

                            <img class="ib brick2 img-responsive animated fadeInRight"  src="<?php  echo get_template_directory_uri().'/assets/img/slide-title-border.png'; ?>" alt="brick2">

                            <h1 class="webdesignh animated fadeInUp" ><?php echo($maintitle);?></h1>

                            <h2 class="options animated fadeInUp"></h2>
<!--                            leaving some data-anmation attrs, they must be added to class-->

                        </div>

                        <div class="firstslide-2 col-sm-8 col-sm-offset-1">


                            <img class="cloudbulb" data-animation="animated fadeInUp" src="" alt=".">


                            <img class="ring3 " data-animation="animated fadeInUp" src="" alt="." >

                            <img class="ring2 " data-animation="animated fadeInUp" src="" alt=".">

                            <img class="ring1 " data-animation="animated fadeInUp" src="" alt=".">

                            <img class="box1 " data-animation="animated fadeIn" src="" alt=".">

                            <div class="think white" data-animation="animated fadeInUp"></div>

                            <div class="outside white" data-animation="animated fadeInUp"></div>

                            <div class="thebox white" data-animation="animated fadeInUp"></div>


                        </div>


                    </div>

                <?php } ?>


            </div>

Слайдер, кажется, работает нормально на другом компьютере, но когда я перенес его на этот, он разрушается.

Вот стиль:

<style>

     body
     {
     }

    .firstslide
    {
        min-height:300px;
        width:45%;
        position: relative;
        top:120px;
        left:120px;
        color: white;
        text-align:center;
        float: left;
    }



    .firstslide h2
    {
        font-size: 1.2vw;
        margin:0 5px 0 5px;
        word-spacing: 5px;
    }

    .firstslide h1
    {
        font-size:4vw;
        margin-top:4px;
        font-weight:bold;
        margin-bottom:7px;
    }

    .ib
    {
        display: inline-block;
    }
    .firstslide-2
    {

        float: left;
        min-height:300px;
        width:45%;
        text-align: center;
    }

    .firstslide-2 .box1
    {
        margin:30px 0 0 290px;
    }
    .firstslide-2 .cloudbulb
    {
        margin:0 0 0 -110px;
    }
    .firstslide-2 .ring3{
        margin:100px 0 0 0;
    }

    .firstslide-2 .ring2{
        margin:190px 0 0 0;
    }

    .firstslide-2 .ring1{
        margin:260px 0 0 0;
    }

    .carousel-control
    {
        width:20px;
    }


    .firstslide .brick,
    .firstslide .brick2
    {
        animation-delay: .3s;
    }
    .webdesignh
    {
        animation-delay: .6s;
    }
    .options
    {
        animation-delay: 1s;
    }
    .box1
    {
        animation-delay:1.7s;
        animation-duration: .8s;
    }
    .ring1
    {
        animation-delay: 2s;
        animation-duration:.1s;
    }
    .ring2
    {
        animation-delay:2.2s;
        animation-duration: .1s;
    }
    .ring3
    {
        animation-delay:2.4s;
        animation-duration: .1s;
    }
    .cloudbulb
    {
        animation-delay:2.7s;
        animation-duration: .1s;
    }
    .white
    {
        color:white;

        font-size: 2vw;
    }
    .think{
        animation-delay:2.9s;
        animation-duration: .1s;
        margin-bottom:20px;
    }

    .outside{
        animation-delay:3.1s;
        animation-duration: .1s;
        margin-bottom:20px;
    }

    .thebox{
        animation-delay:3.2s;
        animation-duration: .1s;
        margin-bottom:20px;
    }
    .carousel-inner
    {
        background: url('<?php echo get_template_directory_uri()."/assets/img/slide-bg.jpg"; ?>') no-repeat;
        background-position: center center;
        background-size: cover;
        min-height: 600px;
    }

    @media only screen and (max-width : 1220px) {
        .cloudbulb {
            width: 30%;
            height: 30%;
        }

        .ring3 {
            width: 7%;
            height: 7%;
        }

        .ring2 {
            width: 7%;
            height: 7%;
        }

        .ring1 {
            width: 7%;
            height: 7%;
        }

        .firstslide-2 .box1 {
            margin: 400px 0 0 -10px;
            width: 20%;
            height: 20%;
        }

        .firstslide-2
        {
            margin-top: -100px;
        }
    }

    @media only screen and (max-width : 950px) {
        .cloudbulb {
            width: 30%;
            height: 30%;

        }

        .ring3 {
            width: 10%;
            height: 10%;
        }

        .ring2 {
            width: 10%;
            height: 10%;
        }

        .ring1 {
            width: 10%;
            height: 10%;
        }

        .firstslide-2 .box1 {
            width: 20%;
            height: 20%;
            margin: 370px 0 10px -20px;
        }
        .firstslide-2
        {
            padding:0 0 0 100px;
        }

    }

    @media only screen and (max-width : 768px) {
        .firstslide-2 .cloudbulb
        {
            margin:0;
        }
        .firstslide-2 .box1
        {
            margin: 340px 0 0 -10px;
        }
    }

    @media only screen and (max-width : 600px) {
        .firstslide-2 .cloudbulb {
            width: 40%;
            height: 40%;
            margin: 0 0 -80px 0;
        }

        .firstslide-2 .ring3 {
            width: 10%;
            height: 10%;
            margin: 100px 0 -10px 0;
        }

        .firstslide-2 .ring2 {
            width: 10%;
            height: 10%;
            margin: 140px 0 0 0;
        }

        .firstslide-2 .ring1 {
            width: 10%;
            height: 10%;
            margin: 160px 0 0 0;
        }
        .firstslide-2 .box1
        {
            width: 20%;
            height: 20%;
            margin: 230px 0 0 -10px;
        }
        .firstslide-2
        {
            padding: 80px 0 0 40px;
        }
        .firstslide
        {
            padding-right: 100px;
        }
    }



</style>