Jquery 在引导幻灯片中抓取twitter提要

我目前只能从流中加载一条tweet到幻灯片中。我想这只是把

放在正确位置的问题，但我遗漏了一些东西

我的HTML将它放在一个

carousel content

div中，但我认为它只需要是一个带有提要的content div：

    <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 class="item active">
                    <div class="carousel-content">
                        <div>
                            <div id="feed">
                                <ul class="tweets">
                                    <li class="tweet"></li>
                                </ul>
                            </div>
                             <h3>#1</h3>

                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                             <h3>#2</h3>

                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                             <h3>#3</h3> 
                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </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>

#1
这是一个只使用文本的twitter引导转盘。转盘幻灯片中没有图像

#2
这是一个只使用文本的twitter引导转盘。转盘幻灯片中没有图像

#3 
这是一个只使用文本的twitter引导转盘。转盘幻灯片中没有图像

Javascript就在下面

---

当前的工作版本是：

，因此答案更简单一些。抓取提要，然后创建内部元素将推文放入：

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 slides">
                        <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 = $(".carousel-inner"),
             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);

 });

var Twitter={}；
Twitter.callback=function（jsonP）{
//log（“json”，jsonP）；
var parser=$（“.parser”），
容器=$（“.carousel-inner”），
推特，
我
createItem=函数（项，索引）{
var div=$（''），
divInner=$（''）；
控制台日志（“”）；
div.append（divInner.append（$（item.children（））；
div.append（$（item.children（））；
返回div；
};
html（jsonP.body）；
tweets=$（'h-feed'）。children（'li'）；
对于（i=0；i

基本上，您需要在创建tweet后初始化旋转木马，并创建每个

，这样它就知道要浏览哪些内容。您的意思是让旋转木马jquery位于twitter jquery之后吗？更改

tweets

？@JacobRaccuia的类，您能提供一个jsfiddle示例吗？我无法在jsfiddle中实现。实际上，您在一张幻灯片中加载了10条推文。您需要每个tweet充当幻灯片，因此，通过将“item”添加到tweet类，您可以让tweets容器成为旋转木马。是的，所有tweet都会在第一张幻灯片中结束（尽管第一张幻灯片中只有一条tweet可用）。我在jsfiddle:第158行的tweet类中添加了

item

，但它仍然不能产生在幻灯片中显示每条tweet的正确结果。有什么想法吗？