3 game cards per slide in a bootstrap carousel - ruby-on-rails

Question

I have a bootstrap carousel on a page, where I have 3 game cards per one slide, but they are hardcoded. How can I make them dynamic? I need to take game cards from my db. This is what I have now:
<div id="carousel" class="carousel-inner thumb-inner">
<div class="active item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
</div>
</div>
<div class="item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
</div>
</div>
</div>
What is the right way to put a ruby code here? My thoughts were smth. like this:
<div class="active item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<% Game.all.each_with_index do |game, index| %>
<div class="col-lg-4 col-md-4 col-sm-4">
<%= game.title %>
</div>
<% end %>
</div>
</div>
But this will give me all game card on a slide. What is the correct way to make 3 game card per one slide? Thanks.

Answer 1

You could make use of limit and offset here to get 3 records at a time. For example:
Game.offset(0).limit(3) # first 3 items
Game.offset(3).limit(3) # next 3 items
If the Game table only has a small number of records that fit comfortably in memory, you could also do something like this:
items = Game.all.to_a # do this once to load up all the records
items.shift(3) # call repeatedly to get the next 3 items
This has the advantage that you can randomise the items upfront e.g. Game.order("RANDOM()").to_a