Extracting image index from array in order to insert image into a bootstrap carousel

I have an array of images which I can iterate over and display on my page however this is not what I want. I would like to find the index of each image in my array so that (on each loop) I can insert one of the images into my bootstrap carousel slides.

Will I need Javascript to do this? I am unsure and hope someone can point me in the right direction.

To start I tried to do a for each with index loop and extract the index but I was not able to :(

This is the bootstrap carousel. So far you can see that I have put my iteration into the first slide which means all 3 images are showing on the first slide:

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
     <!--  <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg"
       alt="First slide"> -->
      <!-- app/views/posts/show.html.erb -->
     <% if @service.images.attached? %>
      <% @service.images.each do |image| %>
        <%= image_tag(image) %>
        <% end %>
     <% end %>
    </div>
     <div class="carousesl-item">
   <!--   <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg"
    alt="Second slide"> -->
    </div>
    <div class="carousel-item">
   <!--    <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg"
     alt="Third slide"> -->
    </div>
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
  <ol class="carousel-indicators">
    <li data-target="#carousel-thumb" data-slide-to="0" class="active">
      <img src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(88).jpg" width="100">
    </li>
    <li data-target="#carousel-thumb" data-slide-to="1">
      <img src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(121).jpg" width="100">
    </li>
    <li data-target="#carousel-thumb" data-slide-to="2">
      <img src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).jpg" width="100">
    </li>
  </ol>
</div>
<!--/.Carousel Wrapper-->
</div>