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>

Your jquery isn't loading: http://zjscreations.com/js/jquery-1.11.3.min.js — Offir, Dec 29 '16 at 08:50
Fixed that, thanks guys. Still wasn't working, but I think I got it! — Zoey Jordan Salsbury, Dec 29 '16 at 09:03

score 1 · Answer 1 · answered Dec 29 '16 at 08:57

1

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.

answered Dec 29 '16 at 08:57

Tha'er AlAjlouni ثائر العجلوني

14,069
7
33
38

Thank you! I fixed that and was still having issues. Finally sorted it out. Have no idea why it works, but I had to add two calls. – Zoey Jordan Salsbury Dec 29 '16 at 08:59
1

If you'd like to share the working code, I might help you sorting this out, and get rid of the second call :) – Tha'er AlAjlouni ثائر العجلوني Dec 29 '16 at 09:05
Working code was this: '' – Zoey Jordan Salsbury Dec 29 '16 at 09:11
1

From what I see the second call will be executed first, and when the page is ready it will call the first. If you remove the second call `jQuery('#myCarousel').carousel();` it will stay working; but you need to wait until the page is ready and then autoplay will start. – Tha'er AlAjlouni ثائر العجلوني Dec 29 '16 at 09:16
Absolutely :) Done – Zoey Jordan Salsbury Dec 29 '16 at 09:31

score 0 · Answer 2 · edited May 23 '17 at 12:24

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>

score 0 · Answer 3 · answered Dec 29 '16 at 09:05

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>

Carousel not autoplaying nor clickable (Bootstrap 3)

3 Answers3