Bootstrap 4 Data-Slide-to funktioniert nicht

Question

Nach Bootstrap-Dokumentation sollte ich in der Lage sein, eine bestimmte Folie in einem Karussell zu zielen und zu dieser Folie mit dem Data-Slide-to-Attribut zu gehen. Ich habe hier ein kleines Beispiel Fest bis: https://codepen.io/alemieux/pen/mqzVML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-slide-to="0"> 
Go to First Slide 
</button> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-slide-to="1"> 
Go to Second Slide 
</button> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-slide-to="2"> 
Go to Third Slide 
</button> 
<!-- Modal --> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-body"> 
     <!-- Carousel with controls --> 
     <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 
      <div class="carousel-inner"> 
       <div class="carousel-item active"> 
        <h1>This is the first slide</h1> 
        <p>The content of slide 1</p> 
       </div> 
       <div class="carousel-item"> 
        <h1>This is the Second slide</h1> 
        <p>The content of slide 2</p> 
       </div> 
       <div class="carousel-item"> 
        <h1>This is the Third slide</h1> 
        <p>The content of slide 3</p> 
       </div> 
       <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> 
       <span class="carousel-control-prev-icon" aria-hidden="true"><i class="fa fa-chevron-left" aria-hidden="true"></i></span> 
       </a> 
       <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> 
       <span class="carousel-control-next-icon" aria-hidden="true"><i class="fa fa-chevron-right" aria-hidden="true"></i></span> 
       </a> 
      </div> 
     </div> 
     <!-- End Carousel --> 
     </div> 
     <button type="bottom" class="btn btn-secondary" data-dismiss="modal">Close</button> 
    </div> 
</div> 

Aber es funktioniert nicht. Das Karussell ist in einem Modal und ich frage mich, ob das das Problem ist.

Answer 1

Ich denke, dass das data-slide-to Attribut wurde entwickelt, um auf <ol> Elemente innerhalb der Hauptkarussell-Tag verwendet werden. Doch mit ein wenig Javascript, können Sie es funktioniert:

$('button[data-slide-to]').on('click', function(){ 
    $('#carouselExampleControls').carousel($(this).data('slide-to')); 
}); 

Außerdem würde ich data-interval="false" auf dem Karussell-Tag zu setzen, um betrachten die automatische Radfahren zu stoppen.

UPDATE: CodePen