bootstrapでcarousel表示をしたい

Question

連投すみません、直近の質問の続き?の様な内容になります。
dbからランダムで取得した５件のデータをbootstrapのcarousel表示をしたいです。

下記コードを実行するとタイトルと画像が５件分重なって表示され、carousel表示になりません。

<div id="random" class="carousel slide data-ride="carousel"">
  <div class="carousel-inner"> 
    <% @random.each do |post| %>
      <div class="carousel-item active">
        <p><%= link_to post.title %></p>
        <%= image_tag post.images.content.to_s %>
      </div>
    <% end %>
    <a class="carousel-control-prev" href="#example-2" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#example-2" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

データの最初の一件にclass="carousel-item active"を与えて、残り４件にclass="carousel-item"を与えれば上手くできるかと思いましたが、見当違いでした。
ご教授頂きたいです。

Answer 1

自己解決しました。
５件だけでしたので、@random[n]で取得しました。
スマートなやり方あれば教えていただきたいです。