使用Twitter Bootstrap Carousel的Expression Engine频道条目不起作用

时间:2012-09-12 21:04:54

标签: codeigniter twitter-bootstrap carousel expressionengine

好的,所以我在通过ExpressionEngine的频道条目实现基本的Twitter bootstrap Carousel时遇到了问题。我认为这与你必须为引导程序指定第一个li标签为“active”以了解在页面加载时呈现哪个图像这一事实有关。但我的代码如下

<div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">

     {exp:channel:entries channel="work" dynamic="no"}
       <div class="item">
        <div class="workItem">
          <a href="{title_permalink='work/view'}">{project_image wrap="image"}</a>
          <a href="{title_permalink='work/view'}"><h3>{title}</h3></a>
        </div>
       </div>
     {/exp:channel:entries}

           </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

所以似乎正在发生的事情是当页面加载时没有显示图像,因为我没有标记“活动”类,因为这段代码只运行我在EE控制面板中创建的所有“项目”信道:条目。因为滚动箭头确实显示,当我点击它们时它跳转到第一个图像,然后我可以滚动项目图像。

有没有办法将第一个项目(或最近的项目)激活为class =“active”,以便它将成为默认的登陆项目。任何有关这方面的帮助都会非常感激......或者如果有更好/更简单的方法可以让我知道

非常感谢,

1 个答案:

答案 0 :(得分:5)

您可以使用{count} variable in {exp:channel:entries}将类添加到仅包含条件的第一项:

{exp:channel:entries channel="work" dynamic="no"}
  <div class="item {if count == 1}active{/if}">
    [...]
  </div>
{/exp:channel:entries}