<div class="orbit margin-bottom" role="region" aria-label="<%= answer.title %>" data-orbit data-auto-play="false">
  <a data-toggle="answer_<%= answer.id %> zoom_<%= answer.id %>" class="zoom-link hide-for-small-only">
    <span id="zoom_<%= answer.id %>" class="icon-search-plus" data-toggler="icon-search-plus icon-search-minus"></span>
    <span class="show-for-sr"><%= t("polls.show.zoom_plus") %></span>
  </a>

  <ul class="orbit-container">
    <li>
      <button class="orbit-previous">
        <span class="show-for-sr"><%= t("shared.orbit.previous_slide") %></span>&#9664;&#xFE0E;
      </button>
    </li>
    <li>
      <button class="orbit-next">
        <span class="show-for-sr"><%= t("shared.orbit.next_slide") %></span>&#9654;&#xFE0E;
      </button>
    </li>

    <% answer.images.reverse.each_with_index do |image, index| %>
      <li class="orbit-slide <%= active_class(index) %>">
        <%= link_to image.attachment.url(:original), target: "_blank" do %>
          <%= image_tag image.attachment.url(:original),
                        class: "orbit-image",
                        alt: image.title %>
        <% end %>
        <span class="orbit-caption"><%= image.title %></span>
      </li>
    <% end %>

  </ul>

  <nav class="orbit-bullets">
    <% answer.images.each_with_index do |image, index| %>
      <button class="<%= active_class(index) %>" data-slide="<%= index %>">
        <span class="show-for-sr"><%= image.title %></span>
      </button>
    <% end %>
  </nav>
</div>
