私は 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">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</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">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>