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