仅显示少数元素，其他元素可以使用箭头导航

Question

良好的系泊。 我有一个变量$ awards = array，它包含来自特定用户的数据库中的一些数据。此变量为结果集用户提取一组奖励。

<div>
  <span class="zoom-gallery" n:foreach="$awards as $award" n:if="$award['user_id'] == $solver['id']">
    <a href="{$basePath}{$award['link']}">
      <img src="{$basePath}{$award['preview']}"/>
    </a> 
  </span>
</div>

然而，一些用户获得了如此多的奖励 - ＆gt;我想展示两个箭头之间的前4个奖项，允许通过另一个。

示例：arrow_prev AWARD1 AWARD2 AWARD3 AWARD4 arrow_next

你可以帮我怎么做？我知道它可以通过javascript解决，但我不知道javascrip很多（初学者）。或者 - 确实存在一些插件？谢谢