3

さて、ExpressionEngine のチャネル エントリを介して基本的な Twitter ブートストラップ カルーセルを実装する際に問題が発生しました。ページの読み込み時にどの画像が表示されるかをブートストラップで知るために、最初のliタグを「アクティブ」として指定する必要があるという事実に関係していると思います。しかし、私のコードは次のとおりです

<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" としてアクティブ化して、デフォルトのランディング プロジェクトにする方法はありますか。これに関するヘルプは大歓迎です...または、より良い/簡単な方法があれば教えてください

どうもありがとう

4

1 に答える 1

5

{count}変数in{exp:channel:entries}を使用して、条件付きの最初の項目にのみクラスを追加できます。

{exp:channel:entries channel="work" dynamic="no"}
  <div class="item {if count == 1}active{/if}">
    [...]
  </div>
{/exp:channel:entries}
于 2012-09-12T21:25:11.757 に答える