Bootstrap Carousel active class not working in Rails

Question

For some reason the 'active' class for the carousel is not cycling for the following code:

<div id="foo" class="carousel slide" data-ride="carousel">
    <div class="overlay"><h1>SOME TEXT HERE</h1></div>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#foo" data-slide-to="0" class="active"></li>
        <li data-target="#foo" data-slide-to="1"></li>
        <li data-target="#foo" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" id="main-carousel"  role="listbox">
        <div class="item active">
            <%= image_tag("someImage.JPG") %>
        </div>
        <div class="item">
            <%= image_tag("someImage.JPG") %>
        </div>
        <div class="item">
            <%= image_tag("someImage.JPG") %>
        </div>
    </div>
</div>

at the bottom of the page I have the following script tag:

<script>
    $('.carousel').carousel({ interval: 3000 });
</script>

The active class does not move to the second or third item.

Answer 1

There is nothing wrong with your code from everything I can tell here. The only problems I see could be with:

1. The path to your images is incorrect.
2. You do not have the dependencies for bootstraps carousel loaded into your project which require bootstrap.css jQuery and the bootstrap.js script.

Working fiddle with your exact code here: https://jsfiddle.net/khvgqkme/