javascript - 轮播多项目：项目未对齐

Question

我正在尝试获得一个多项目轮播，每次按下箭头时，我都会显示 3 个项目并滑动一个。

我让 3 个项目垂直对齐，而我想让它们水平对齐。

我正在使用带有母版页的 WebForms。

任何人都可以帮助这个例子吗？

$(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>

任何帮助将不胜感激

标签： javascripthtmlcssfrontend