jquery - Bootstrap 轮播标记错误？

Question

我在初始化 Bootstrap Carousel 插件、运行 WordPress 3.7、尝试使用循环动态加载元素时遇到问题，但不确定出了什么问题；据我了解，我正在使用 documentation 中的数据属性.代码如下。

<div id="featured-things" class="carousel slide" data-ride="carousel" >
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <?php foreach ($slider_things as $key => $thing): ?>
      <li data-target="#featured-things"  <?php
      if($key==0){print "class='active'";}
      ?> data-slide-to="<?php print $key?>" ></li>
    <?php endforeach ?>
  </ol>

  <?php foreach ($slider_things as $key => $thing): ?>
    <div class="carousel-inner">
      <div class="item <?php
      if($key==0){print "active";}?>"  >
        <a href="<?php print $thing->url; ?>"><img src="<?=$thing->feature_image ?>" alt="<?php print $thing->title; ?>" /></a>
        <div class="carousel-caption">
          <p><?php print $thing->caption; ?></p>
        </div>
      </div>
    </div>
  <?php endforeach ?>
  <a class="left carousel-control" href="#featured-things" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#featured-things" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>

jQuery 在页眉中加载，bootstrap.min.js 在页脚中加载。我没有使用 JS 来初始化它，因为据我了解，您不需要这样做。

结果是我看到了幻灯片，但是没有前进。

我错过了什么？

Answer 1

全部排序。意识到我应该将循环嵌套在 .carousel-inner 元素中。

<div class="carousel-inner"> 
    <?php foreach ($slider_things as $key => $thing): ?>  
        <div class="item <?php if($key==0){print "active";}?>"  >
          <a href="<?php print $thing->url; ?>">
           <img src="<?=$thing->feature_image ?>" alt="<?php print $thing->title; ?>" />
          </a>
          <div class="carousel-caption">
             <p><?php print $thing->caption; ?></p>
          </div>
        </div>
    <?php endforeach ?>
</div>

完成