carouselが動かなくなる理由

erb
1  <div id="carousel" class="carousel slide" data-ride="carousel">
2    <div class="carousel-inner">
3      <div class="item active" data-thumb="0">
4        <%= image_tag("#{@images[0].url(:large)}") %>
5      </div>
6      <div class="item" data-thumb="1">
7        <% if @images[1] %>
8          <%= image_tag("#{@images[1].url(:large)}") %>
9        <% else %>
10          <%= image_tag("noimage.png") %>
11        <% end %>
12      </div>
13      <div class="item" data-thumb="2">
14        <% if @images[2] %>
15          <%= image_tag("#{@images[2].url(:large)}") %>
16        <% else %>
17          <%= image_tag("noimage.png") %>
18        <% end %>
19      </div>
20      <div class="item" data-thumb="3">
21        <% if @images[3] %>
22          <%= image_tag("#{@images[3].url(:large)}") %>
23        <% else %>
24          <%= image_tag("noimage.png") %>
25        <% end %>
26      </div>
27    </div>
28  </div>

上記のような記述で動作確認が取れた為
下記のように書き換えると動かなくなってしまいました。

erb
1
2  <div id="carousel" class="carousel slide" data-ride="carousel">
3    <div class="carousel-inner">
4      <div class="item active" data-thumb="0">
5        <%= image_tag("#{@images[0].url(:large)}") %>
6      </div>
7      <% 3.times do |n| %>
8        <div class="item" data-thumb="#{n+1}">
9          <% if @images[n+1] %>
10            <%= image_tag("#{@images[n+1].url(:large)}") %>
11          <% else %>
12            <%= image_tag("noimage.png") %>
13          <% end %>
14        </div>
15      <% end %>
16    </div>
17  </div>

コードを書きながら気づいたのですが、
<div class="item" data-thumb="#{n+1}">の部分の変数展開が意味を成していないのが原因かと思ったのですがあっていますでしょうか？
仮に<div class="item" data-thumb="<%= n+1 %>">というように書き直せば上記のコード自体には問題はなさそうでしょうか？

併せてですが望ましくない書き方をしているなどご指摘あればお願い致します。