Carousel not autoplaying nor clickable (Bootstrap 3)

Question

Y'all I'm losing my mind. I've spent days on this site and others trying different code snippets.

When I preview in jsfiddle, everything is fine. But on my site, it doesn't autoplay and I can't click the nav buttons either. Help!

Live site here: www.zjscreations.com

<section>
 <script>
  $(function() {
    $('#myCarousel').carousel({
       interval: 2000
    });
});
</script>
 <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->

   <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/Hanna Edens Headshot - Alki Beach.jpg" alt="Hanna Edens Heashot - Alki Beach" class="img-responsive">
    </div>
    <div class="item">
      <img src="images/Stella Salsbury - Dog Portrait.jpg" alt="Stella Salsbury - Dog Portrait" class="img-responsive">
    </div>
    <div class="item">
      <img src="/images/Hanna Edens Headshot - Seattle Skyline.jpg" alt="Hanna Edens Heashot - Seattle Skyline" class="img-responsive">
    </div>
  </div>

  <!-- Left and right controls -->

 <a class="carousel-control left" href="#my_carousel" data-slide = "prev">
    <span class="icon-prev left"></span>
  </a>

  <a class="carousel-control right" href="#my_carousel" data-slide = "next">
    <span class="icon-next right"></span>
  </a>
</div>
</section>

Answer 1

Directly add this lines at end of your page

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

I fixed the jQuery library, but it still wasn't working. I had to change the script code to the following.

I have no idea why it worked, and neither did the OP (thanks byronyasgur!), so if anyone has insight into why this fixed it, that'd be rad. (That way I'll know for the future instead of just copy/pasting code)

<script>
  jQuery(document).ready(function () {
    jQuery('#myCarousel').carousel(
    {
    interval:2000
    });
});

jQuery('#myCarousel').carousel();
</script>

Answer 3

After testing on your site it showed that the jQuery library isn't loading correctly, it seems the path you provide isn't accurate. Try fixing the url of the jQuery js file.