引导轮播中每张幻灯片 3 张游戏卡答案

【问题标题】：3 game cards per slide in a bootstrap carousel引导轮播中每张幻灯片 3 张游戏卡
【发布时间】：2017-03-07 09:52:46
【问题描述】：

我在页面上有一个引导轮播，每张幻灯片有 3 张游戏卡，但它们是硬编码的。我怎样才能让它们充满活力？我需要从我的数据库中取出游戏卡。这就是我现在拥有的：

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

在此处放置 ruby 代码的正确方法是什么？我的想法是smth。像这样：

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

但这会给我一张幻灯片上的所有游戏卡。一张幻灯片制作 3 张游戏卡的正确方法是什么？谢谢。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap dynamic carousel

【解决方案1】：

您可以在这里使用limit 和offset 一次获取3 条记录。例如：

Game.offset(0).limit(3)  # first 3 items
Game.offset(3).limit(3)  # next 3 items

如果 Game 表只有少量的记录可以很好地存储在内存中，您还可以执行以下操作：

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

这样做的好处是您可以预先随机化项目，例如Game.order("RANDOM()").to_a

【讨论】：