Jquery Content Carousel not loading items properly

I am working on simple bootstrap content carousel.... Live Demo

The problem is that there should load 3 items each slide.....as can be seen from code but there loads only one item on each slide....The rest of the slider is working good except the item loading...

Razor Code :

<div class="container img-responsive" style="background: #d9e5e9;
padding-left: -0px; padding-bottom: 10px; padding-top: 10px;
margin: 20px auto; width: 980px;">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            @{
                int counter = 0;
                foreach (var item in ViewBag.LoadEps)
                {
                    if (counter == 0)
                    {
                        <div class="item active">
                            <div class="col-lg-4">   
   <a href="@Url.Action("LoadEpisodes", "Home", new { id = item.VideoId,
    epId =item.VideoEpisodeId, name = item.Title.Replace(" ", "-")}, null)"
    style="color: white; text-align: center; line-height: 12px;">
    <img src="@Url.Content(item.PosterUrl)" height="130" 
    width="200" alt="@item.Title" class="ImageBorder" /><br />@item.Title
                                    </a>
                            </div>
                        </div>
                    }

                    else
                    {
                        <div class="item">
                            <div class="col-lg-4">
                               
    <a href="@Url.Action("LoadEpisodes", "Home", new { id = item.VideoId,
    epId =item.VideoEpisodeId, name = item.Title.Replace(" ", "-")}, null)"
    style="color: white; text-align: center; line-height: 12px;">
    <img src="@Url.Content(item.PosterUrl)" height="130" 
    width="200" alt="@item.Title" class="ImageBorder" /><br />@item.Title
                                    </a>
                            </div>
                        </div>
                    }
                    counter++;
                }
            }
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

Style

<style>
    .carousel-inner .active.left {
        left: -25%;
    }

    .carousel-inner .next {
        left: 25%;
    }

    .carousel-inner .prev {
        left: -25%;
    }

    .carousel-control {
        width: 4%;
    }

        .carousel-control.left, .carousel-control.right {
            margin-left: 15px;
            background-color: #036ca6;
        }
</style>

Script

<script>
    $(document).ready(function () {
        $('#myCarousel').carousel({
            interval: 4000
        })

        $('.carousel .item').each(function () {
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (var i = 0; i < 2; i++) {
                next = next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }

                next.children(':first-child').clone().appendTo($(this));
            }
        });
    });
</script>

The problem only with the items loading, although slider is working fine, libraries loading fine.... I have no idea how to test it and find error like console errors in firebug... I wasn't able to sort out the jquery by myself.... If some one please any type of help will be appreciated..... Thanks for your time..