Bootstrap4同一页面同时使用默认轮播与多项目轮播失败求助

Hey there! I took a look at your code and figured out why your two carousels weren't playing nice together. The main issues were style conflicts between the multi-item carousel CSS and Bootstrap's native carousel styles, plus a lack of targeted JS initialization for each carousel. Let's fix this step by step:

1. Isolate Multi-Item Carousel Styles #

The root problem with your CSS was that it was overwriting Bootstrap's default carousel styles globally. To fix this, wrap your multi-item carousel in a unique parent container (like .multi-item-carousel) and prefix all custom styles with this class. This ensures your custom rules only affect the multi-item carousel, not the default one.

/* Multi-item carousel styles (isolated to parent container) */
.multi-item-carousel .carousel-inner .carousel-item {
  transition: transform 0.6s ease-in-out;
}
.multi-item-carousel .carousel-inner .carousel-item.active,
.multi-item-carousel .carousel-inner .carousel-item-next,
.multi-item-carousel .carousel-inner .carousel-item-prev {
  display: flex;
}
.multi-item-carousel .carousel-inner .carousel-item-right.active,
.multi-item-carousel .carousel-inner .carousel-item-next {
  transform: translateX(33.333%);
}
.multi-item-carousel .carousel-inner .carousel-item-left.active, 
.multi-item-carousel .carousel-inner .carousel-item-prev {
  transform: translateX(-33.333%);
}
.multi-item-carousel .carousel-inner .carousel-item-right,
.multi-item-carousel .carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

2. Target Each Carousel with Unique IDs & JS Initialization #

Give each carousel a unique ID, then initialize them separately in JS. This prevents the multi-item carousel's custom logic from leaking into the default single-item carousel.

Updated HTML

<!-- Default Single-Item Carousel -->
<div id="default-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#default-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#default-carousel" data-slide-to="1"></li>
    <li data-target="#default-carousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://via.placeholder.com/800x400?text=Slide+1" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://via.placeholder.com/800x400?text=Slide+2" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://via.placeholder.com/800x400?text=Slide+3" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#default-carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#default-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- Multi-Item Carousel (wrapped in isolated container) -->
<div class="multi-item-carousel mt-4">
  <div id="multi-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="col-md-4"><img class="d-block w-100" src="https://via.placeholder.com/400x300?text=Item+1" alt="Item 1"></div>
      </div>
      <div class="carousel-item">
        <div class="col-md-4"><img class="d-block w-100" src="https://via.placeholder.com/400x300?text=Item+2" alt="Item 2"></div>
      </div>
      <div class="carousel-item">
        <div class="col-md-4"><img class="d-block w-100" src="https://via.placeholder.com/400x300?text=Item+3" alt="Item 3"></div>
      </div>
      <div class="carousel-item">
        <div class="col-md-4"><img class="d-block w-100" src="https://via.placeholder.com/400x300?text=Item+4" alt="Item 4"></div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#multi-carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#multi-carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Targeted JS Initialization

// Initialize default single-item carousel normally
$('#default-carousel').carousel();

// Custom logic exclusively for multi-item carousel
$('#multi-carousel').on('slide.bs.carousel', function (e) {
  var $targetSlide = $(e.relatedTarget);
  var slideIndex = $targetSlide.index();
  var itemsPerSlide = 3;
  var totalItems = $('.carousel-item', this).length;

  // Loop to clone slides for infinite scrolling effect
  if (slideIndex >= totalItems - (itemsPerSlide - 1)) {
    var slidesToClone = itemsPerSlide - (totalItems - slideIndex);
    for (var i = 0; i < slidesToClone; i++) {
      if (e.direction === "left") {
        $('.carousel-item', this).eq(i).appendTo('.carousel-inner', this);
      } else {
        $('.carousel-item', this).eq(0).appendTo('.carousel-inner', this);
      }
    }
  }
});

Why Your Previous Fixes Didn't Work #

• Unisolated CSS: When you modified styles without a unique parent class, you overwrote Bootstrap's native carousel styles, breaking both carousels. The .multi-item-carousel prefix keeps custom styles contained.
• Global JS Initialization: If you initialized all carousels with a generic $('.carousel').carousel(), the multi-item logic applied to your default carousel too. Using unique IDs lets us isolate behavior.

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