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在header中加载，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>

完成

Bootstrap轮播标记错误？

1 个答案: