Bootstrap 4 轮播组件不符合预期：复制官方代码无法运行

I copied the simple carousel code from Bootstrap’s official site, included the Bootstrap CSS, jQuery, and Bootstrap JS via CDN, but the carousel still won’t work. There are errors in the browser console, and I can’t figure out why.

Let’s break down the most likely problems and how to fix them:

• Double-check your CDN load order
  Bootstrap JS (especially versions 4 and below) depends on jQuery to function properly. If you load Bootstrap JS before jQuery, you’ll see errors like $ is not defined in the console. Follow this correct loading sequence:

  1. jQuery (only required for Bootstrap 4; Bootstrap 5 drops jQuery dependency entirely)
  2. Bootstrap JS (use bootstrap.bundle.min.js if you need Popper.js for tooltips/modals—this bundle includes it by default)
  3. Any custom scripts you’ve written

  Example for Bootstrap 5:

  <!-- Bootstrap CSS first -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Then Bootstrap JS bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

• Verify your HTML structure is fully compliant
  Bootstrap carousels have strict structural rules—skip one element or class, and it’ll fail to run:

  • The outer .carousel container needs the correct data attribute: data-bs-ride="carousel" (Bootstrap 5) or data-ride="carousel" (Bootstrap 4)
  • At least one .carousel-item must have the active class—without this, the carousel won’t display any content by default
  • All slides must be wrapped inside a .carousel-inner div

  Wrong (missing active class):

  <div class="carousel-item">
    <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
  </div>
  

  Correct:

  <div class="carousel-item active">
    <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
  </div>
  

• Pay close attention to console error messages
  The error log is your best troubleshooting tool:

  • $ is not defined: jQuery isn’t loaded, or it’s loaded after Bootstrap JS
  • Cannot read property 'carousel' of undefined: Bootstrap JS failed to load, or your HTML is missing key classes
  • 404 Not Found: Your image paths are incorrect—double-check they point to the right location

• Ensure code matches your Bootstrap version
  Mismatched versions will break the carousel. For example:

  • Bootstrap 5 uses data-bs-* attributes instead of Bootstrap 4’s data-* (like data-bs-toggle instead of data-toggle)
  • Some class names have changed (carousel classes are mostly consistent, but it’s worth confirming)

• Check for JavaScript conflicts
  If you’re using other libraries (like Prototype or Zepto) that also use the $ symbol, they’ll clash with jQuery. Try wrapping your carousel initialization code to avoid conflicts:

  jQuery.noConflict();
  jQuery(document).ready(function($) {
    $('.carousel').carousel();
  });
  

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