Looping through an array in ERB to create multiple unique data attributes in a single div

I'm using a library called Skrollr.js so that I can replace an image with another image with another image in fast succession (so that it looks animated) as the user scrolls down the page. Skrollr requires the HTML to be written in a specific way, which I have pasted a screenshot of below. Basically, 'background-image' and a few other data attributes must be declared within the tag in a specific way.

Given I'd like to scroll through 180+ frames, it'd be easier to reference an array of image paths so that I don't have to hardcode in 180+ background-image paths into the HTML. The problem is that I cannot get the ERB to output the background-image portion more than once (see "Desired output" vs "actual output" below).

I can't figure out how to get the "data--100-top=" portion in without putting it into quotations, which will go against skrollr's syntax.

Code:

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second"
    <% i=01 %>
    <% until i == @image_urls.length %>
      data--100-top="opacity: 1; background-image: !url(assets/<%=  @image_urls[i].gsub('"','') %>)"
      <% i+=1 %>
    <% end %>
  >

Using "gsub" to get rid of quotes to meet Skrollr syntax

I also tried: (along with numerous other iterations)

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second"
    <% @image_urls.each do |image| %>
      data--100-top="opacity: 1; background-image: !url(assets/<%=  image.gsub('"','') %>)"
    <% end %>
  >

Known format needed to satisfy Skrollr syntax

Here is my desired end result (as viewed in DevTools):

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second" 
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene1.jpg)"
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene2.jpg)"
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene3.jpg)"
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene4.jpg)"
continuing on from here
  >

Here is the actual result in DevTools

div class="full_screen_second" 
data-anchor-target=".full_screen_second" 
data--100-top="opacity: 1; background-image: !url(assets/nav_adjust/scene1.jpg)"
style="opacity: 1; background-image: url(http://localhost:3000/assets/nav_adjust/scene1jpg);"
>

(Note: the style="opacity: 1; background-image: url(http://localhost:3000/assets/nav_adjust/scene1jpg);" portion of the actual output I think is fine, it's the fact that it is only outputting the "data--100-top="opacity: 1; background-image:" portion once that is the issue.

Each HTML atribute needs to be unique. So each data--100-top is overwriting the previous one. I don't know what the integer does in the attribute, but you could make it unique by using either the image.id or a timestamp:

  <div class="full_screen_second"
    data-anchor-target=".full_screen_second"
    <% @image_urls.each do |image| %>
      data--<%= image.id>-top="opacity: 1; background-image: !url(assets/<%=  image.gsub('"','') %>)"
    <% end %>
  >