Карусель Multi-Item: Предметы смещены

Question

Я пытаюсь получить многоэлементную карусель, где я показываю 3 предмета и каждый раз по одному скользлю, каждый раз, когда нажимается стрелка.

Я выравниваю 3 предмета по вертикали, ая хочу получить их по горизонтали.

Я использую веб-формы с мастер-страницей.

Может кто-нибудь помочь с этим примером?

$(document).ready(function () {
   

    $('.carousel.carousel-multi .item').each(function () {
        var next = $(this).next();        
        if (!next.length) {
            next = $(this).siblings(':first');

        }
        next.children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));

        if (next.next().length > 0) {
            next.next().children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));

        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));

        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="carousel-example-multi" class="carousel carousel-multi slide" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-multi" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-multi" data-slide-to="1"></li>
            <li data-target="#carousel-example-multi" data-slide-to="2"></li>
            <li data-target="#carousel-example-multi" data-slide-to="3"></li>
            <li data-target="#carousel-example-multi" data-slide-to="4"></li>
            <li data-target="#carousel-example-multi" data-slide-to="5"></li>
        </ol>


        <!-- Wrapper for slides -->
        <div class="column">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="media media-card">
                        <time class="small">10 Aug 2016</time>
                        <div class="media-category">Commodities Quarterly</div>
                        <h4 class="media-heading">
                            <a href="#">Research article 1</a>
                        </h4>
                        <a class="aside" href="#">Read more</a>

                    </div>
                </div>

                <div class="item ">
                    <div class="media media-card">
                        <time class="small">10 Aug 2016</time>
                        <div class="media-category">Commodities Quarterly</div>
                        <h4 class="media-heading">
                            <a href="#">Research article number two</a>
                        </h4>
                        <a class="aside" href="#">Read more</a>
                    </div>
                </div>

                <div class="item ">
                    <div class="media media-card">
                        <time class="small">10 Aug 2016</time>
                        <div class="media-category">Commodities Quarterly</div>
                        <h4 class="media-heading">
                            <a href="#">Number 3</a>
                        </h4>
                        <a class="aside" href="#">Read more</a>
                    </div>
                </div>

                <div class="item ">
                    <div class="media media-card">
                        <time class="small">10 Aug 2016</time>
                        <div class="media-category">Commodities Quarterly</div>
                        <h4 class="media-heading">
                            <a href="#">This is the fourth article</a>
                        </h4>
                        <a class="aside" href="#">Read more</a>
                    </div>
                </div>

                <div class="item ">
                    <div class="media media-card">
                        <time class="small">10 Aug 2016</time>
                        <div class="media-category">Commodities Quarterly</div>
                        <h4 class="media-heading">
                            <a href="#">...and this is the fifth</a>
                        </h4>
                        <a class="aside" href="#">Read more</a>
                    </div>
                </div>

                <div class="item ">
                    <div class="media media-card">
                        <time class="small">10 Aug 2016</time>
                        <div class="media-category">Commodities Quarterly</div>
                        <h4 class="media-heading">
                            <a href="#">Sixth</a>
                        </h4>
                        <a class="aside" href="#">Read more</a>
                    </div>
                </div>

            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-multi" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-multi" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

Любая помощь будет иметь приоритет