2

私は RoR に比較的慣れていないので、HTMLコードの反復処理に問題がありますerb

Twitter ブートストラップ イメージ カルーセルを操作しています & アプリのイメージを挿入しようとしています。問題は、<li>カルーセルの最初のものclassは、後続<li>のものとは異なるもの、つまりclass="active".

同様に<div>、画像に対応するタグにもclass="item active最初の<div>が必要ですが、後続<div>の は必要ありません。

通常、コード ブロックを使用してイメージを反復処理できますがif、最初の反復で必要な特別なクラスに対応するステートメントを挿入しようとすると、問題が発生します。if節の条件文が正しくないと思います。つまり<% if @hikingtrail.photos[0] %>[0]間違っているようです。とにかく、試してみると、画像カルーセルが台無しになりますが、エラーは返されません。画像が重なっていて、次から次へとスライドしていません。

作業コード - if ステートメントの前

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% counter = 1 %>
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <% @hikingtrail.photos.each do || %>
      <li data-target="#myCarousel" data-slide-to="<%= counter %>"></li>
      <% counter += 1 %>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
      </div>
      <% @hikingtrail.photos.each do |photo| %>
      <div class="item">
      <%= image_tag photo.image_url(:large).to_s %>
      </div> 
      <% end %>      

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

試行された解決策 (if ステートメントを使用)

<div id="show_right"> 
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <% counter = 1 %>
      <% @hikingtrail.photos.each do || %>
        <% if @hikingtrail.photos[0] %>
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <% else %>
        <li data-target="#myCarousel" data-slide-to="<%= counter %>"></li>
        <% end %>
        <% counter += 1 %>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <% @hikingtrail.photos.each do |photo| %>
        <% if @hikingtrail.photos[0] %>
          <div class="item active">
        <% else %>
          <div class="item">
        <% end %>
        <%= image_tag photo.image_url(:large).to_s %>
      </div> 
      <% end %>      
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
</div>
4

2 に答える 2