Looping images in bootstrap carousal rails

Question

I'm having some trouble trying to display multiple images attached to a job post using bootstrap carousal. Here's the original code without the caraousal template:

<% if @job.images.attached? %>
<% (0...@job.images.count).each do |image| %>

<%= image_tag(@job.images[image]) %>

<% end %>
    <% else %>
        <%= image_tag "missing.jpg" %>

                <% end %>

Below is a bootstrap carousal example i used from w3 schools and it works fine when i tested it on my app.

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

So far i've tried :

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <% (0...@job.images.count).each do |image| %>
    <li data-target="#demo" data-slide-to=#{image} class="active"></li>
    <% end %>

  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <% (0...@job.images.count).each do |image| %>
    <div class="item active">
    <%= image_tag(@job.images[image]) %>
    </div>
    <% end %>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

The images are stacking up against each other, and when i click on the next slide, all the images disappear.I'm not sure exactly what to put in the data-slide classes, i'm suspecting that's the cause of the problem.

UPDATE

This code is working when the image slider automatically plays, but manually clicking on an image slider causes the entire carousal to disappear:

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <% @job.images.each_with_index do |image, index| %>
    <li data-target="#demo" data-slide-to=#{index} <%= index == 0 ? 'class="active"' : '' %>></li>
    <% end %>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <% @job.images.each_with_index do |image, index| %>
    <div class="item <%= index == 0 ? 'active' : '' %>">
    <%= image_tag image %>
    </div>
    <% end %>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

Answer 1

Firstly, it looks like you're giving the active class to every image in the slideshow. Secondly, there are easier methods of iterating through your images.

Something like this should work:

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <% @job.images.each_with_index do |image, index| %>
    <li data-target="#demo" data-slide-to=#{index} <%= index == 0 ? 'class="active"' : '' %>></li>
    <% end %>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <% @job.images.each_with_index do |image, index| %>
    <div class="item <%= index == 0 ? 'active' : '' %>">
    <%= image_tag image %>
    </div>
    <% end %>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>