Question

Ok, so i’m having an issue implementing a basic Twitter bootstrap Carousel via ExpressionEngine’s channel entries. I think it has to do with the fact that you must designate the first li tag as “active” for bootstrap to know which image is presented upon page load. But my code is as follows

<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>

So what seems to be happening is when the page loads no image shows up because i don’t have an “active” class tagged since this code simply runs through all the ‘projects’ i’ve created in EE control panel using channel:entries. Because the scroll arrows do show up and when i click on them it jumps to the first image and then i can scroll through the project images.

Is there a way to activate the first project (or most recent) as class=”active” so that it will be the default landing project. Any help on this would be much appreciated…or if there is a better / easier way to do things let me know

thanks a ton,

Answer 1

You can use the {count} variable in {exp:channel:entries} to add the class to only the first item with a conditional:

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