Bootstrap 4 carousel not working inside tabs

Question

Im having a hard time figuring out whats going on here. I need to show a different carousel based on a selected tab, but something seems to be in conflict as it starts breaking when switching between tabs. Is this a library issue?

<div class="bs-example">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#TAB1" data-toggle="tab">TAB1</a></li>
<li><a href="#TAB2" data-toggle="tab">TAB2</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="TAB1">
  <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel1" data-slide-to="1"></li>
      <li data-target="#myCarousel1" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placehold.it/350x150?text=1" alt="First Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=2" alt="Second Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=3" alt="Third Slide"/></div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  </div>
</div>
<div class="tab-pane fade" id="TAB2">
  <div id="myCarousel2" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel2" data-slide-to="1"></li>
      <li data-target="#myCarousel2" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placehold.it/350x150?text=4" alt="First Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=5" alt="Second Slide"/></div>
      <div class="carousel-item"><img src="https://placehold.it/350x150?text=6" alt="Third Slide"/></div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="carousel-control right" href="#myCarousel2" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  </div>
</div>
</div>
</div>

JS fiddle

Answer 1

Yes, this is an issue with Bootstrap 4. It is caused by the carousel indicator active class interfering with the tab-pane and carousel-item active class

The documentation vaguely mentions nesting, but it's not clear if they are referring to other components, or just carousels in general (I would assume the latter)

Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.

https://v4-alpha.getbootstrap.com/components/carousel/

There doesn't seem to be any way around this as removing the active class breaks the carousel.