为 twitter 提要格式化 Bootstrap 轮播

Question

我将推文拉入引导轮播，但它们不会进入自己的单独幻灯片。我正在为.item 和.carousel-content 创建元素，但无法将推文拆分成自己的幻灯片。我错过了什么，所有的推文都在一张幻灯片中？

HTML

<div class="parser" style="display: none"></div>
<div class="container">
    <div id="carousel-example" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="row">
            <div class="col-xs-offset-3 col-xs-6">
                <div class="carousel-inner"></div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>

<a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

</div>

JavaScript

var Twitter = {};

Twitter.callback = function (jsonP) {
    //console.log("json", jsonP);
    var parser = $(".parser"),
        container = $(".container"),
        tweets,
        i,
        createItem = function (item, index) {

            var div = $('<div class="item' + ((index === 0) ? ' active' : '') + '"></div>'),
                divInner = $('<div class="carousel-content"></div>');
            //console.log('<div class="item'+((index === 0)?' active':'') +'"></div>');
            div.append(divInner.append($(item).children()));

            div.append($(item).children());

            return div;
        };

    parser.html(jsonP.body);



    tweets = $('.h-feed').children('li');

    for (i = 0; i < tweets.length; i++) {
        container.append(createItem(tweets[i], i));
    }


}

window.addEventListener("load", function () {
    var jp = document.createElement("script");
    jp.src = "https://cdn.syndication.twimg.com/widgets/timelines/506829210191552512?&lang=en&callback=Twitter.callback&suppress_response_codes=true&rnd=0.3450709420721978";
    var hd = document.getElementsByTagName("head")[0];
    hd.appendChild(jp);

});

$(document).ready(function () {
    $('.carousel').carousel({
        interval: 5000
    });
});

JSFIDDLE：LINK

Answer 1

问题是容器设置为错误的 div。应该是container = $(".carousel-inner")