使用Bootstrap轮播组件时出现Jquery ‘Uncaught TypeError’错误求助

Hey there, let's work through this carousel issue step by step! The Uncaught TypeError you're seeing is almost certainly tied to resource loading order or incorrect component setup—here's how to fix it:

1. Fix Your Resource Loading Order #

First, let's correct the order of your CSS and JS files, since this is the most common culprit:

CSS Files #

Bootstrap's default styles need to load before your custom style.css. If you load your custom CSS first, Bootstrap's styles will overwrite yours, and it can even break component layout logic. Correct order:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

JS Files #

Your jQuery + Bootstrap JS order is correct (jQuery must load first, as Bootstrap depends on it), but fix the invalid closing tag for Bootstrap JS—remove the extra ... inside the script tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Troubleshoot the Uncaught TypeError #

Once the resource order is fixed, check these common issues that trigger this error:

• Missing active class on a slide: Bootstrap requires at least one .item in your carousel to have the active class. Without it, the carousel can't initialize properly. Example correct structure:

  <div class="carousel-inner" role="listbox">
    <div class="item active"> <!-- This active class is mandatory -->
      <img src="your-image.jpg" alt="Slide 1">
    </div>
    <div class="item">
      <img src="another-image.jpg" alt="Slide 2">
    </div>
  </div>
  

• Mismatched data-target values: Ensure the data-target attribute on your carousel indicators matches the ID of your main carousel container. For example:

  <div id="my-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
      <!-- All indicators must use #my-carousel as the target -->
    </ol>
  </div>
  

• Manual initialization (if needed): If you're not using the data-ride="carousel" attribute on your container, make sure you initialize the carousel after the DOM is fully loaded:

  $(document).ready(function() {
    $('#my-carousel').carousel();
  });
  

3. Verify Version Compatibility #

Your chosen jQuery 3.3.1 and Bootstrap 3.3.7 versions are fully compatible, so no issues there—but if you ever update either, double-check that their versions play well together.

内容的提问来源于stack exchange，提问作者petegoast