Twitter Bootstrap carousel does not re-cycle

Question

I've implemented a fullscreen Twitter Bootstrap carousel background on a landing page. Actually, it's something I want to post on stackoverflow since the other versions I found do not work with Bootstrap 3+.

I want the carousel to just keep cycling, but it completes one cycle then returns to the first image and will not cycle nor be controllable. I've tried many different fixes from other places. I've tried using CSS and Javascript implementations. I just can't get it to work right!

Draft here: http://somethingspecial.kevinmgibbons.com

Do you know what I am doing wrong?

HTML:

<div class="container fill">
<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-caption"><!-- replace #s with email address and links to social media pages -->
      <h1>Title</h1>
      <p>Text text text</p>
        <div class="social-icons">
            ...
        </div>
    </div><!-- /carousel-caption -->

    <!-- Carousel Images -->
        <div class="active item"><div class="fill ad1"></div></div>
        <div class="item"><div class="fill ad2"></div></div>
        <div class="item"><div class="fill ad3"></div></div>
        <div class="item"><div class="fill ad4"></div></div>
        <div class="item"><div class="fill ad5"></div></div>
        <div class="item"><div class="fill ad6"></div></div>
        <div class="item"><div class="fill ad7"></div></div>
        <div class="item"><div class="fill ad8"></div></div>
        <div class="item"><div class="fill ad9"></div></div>
        <div class="item"><div class="fill ad10"></div></div>

    <!-- Carousel Controls/Arrows -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

  </div><!-- /.carousel-inner -->
</div><!-- /#myCarousel -->
</div><!-- /.container -->

<!-- Bootstrap Core JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/docs.min.js"></script>

<!-- Carousel Cycle -->
    <script type="text/javascript">
        $('#myCarousel').carousel({ interval: 3000, cycle: "true", wrap: "true", pause: "false" })
    </script>

Answer 1

Expanding on my comment, the reason it wasn't working was because you had the navigation controls inside the carousel-inner div. Here is what the code should look like:

<div class="container fill">
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="carousel-caption"><!-- replace #s with email address and links to social media pages -->
          <h1>Title</h1>
          <p>Text text text</p>
            <div class="social-icons">
                ...
            </div>
        </div><!-- /carousel-caption -->

        <!-- Carousel Images -->
            <div class="active item"><div class="fill ad1"></div></div>
            <div class="item"><div class="fill ad2"></div></div>
            <div class="item"><div class="fill ad3"></div></div>
            <div class="item"><div class="fill ad4"></div></div>
            <div class="item"><div class="fill ad5"></div></div>
            <div class="item"><div class="fill ad6"></div></div>
            <div class="item"><div class="fill ad7"></div></div>
            <div class="item"><div class="fill ad8"></div></div>
            <div class="item"><div class="fill ad9"></div></div>
            <div class="item"><div class="fill ad10"></div></div>

      </div><!-- /.carousel-inner -->
      <!-- Carousel Controls/Arrows -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /#myCarousel -->
</div><!-- /.container -->

<!-- Bootstrap Core JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/docs.min.js"></script>

<!-- Carousel Cycle -->
    <script type="text/javascript">
        $('#myCarousel').carousel({ interval: 3000, cycle: "true", wrap: "true", pause: "false" })
    </script>