格式化Twitter Feed的Bootstrap輪播

Question

我將推文推入引導輪播中，但它們並沒有放入自己的幻燈片中。 我正在創建.item和.carousel-content的元素，但是很難.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： 鏈接

Answer 1

問題是容器設置為錯誤的div。 應該是container = $(".carousel-inner")