现场演示：我的 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Carousel Methods via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var startSlide = document.getElementById("startSlide");
    var pauseSlide = document.getElementById("pauseSlide");
    var prevSlide = document.getElementById("prevSlide");
    var nextSlide = document.getElementById("nextSlide");
    var slideOne = document.getElementById("slideOne");
    var slideTwo = document.getElementById("slideTwo");
    var slideThree = document.getElementById("slideThree");

// Create a carousel instance
    var myCarousel = new bootstrap.Carousel(document.getElementById("myCarousel"));

// Don't cycle carousel to next when it isn't visible
    myCarousel.nextWhenVisible();

// Cycles through the carousel items
    startSlide.addEventListener("click", function(){
        myCarousel.cycle();
    });
  
	// Stops the carousel
    pauseSlide.addEventListener("click", function(){
        myCarousel.pause();
    });

// Cycles to the previous item
    prevSlide.addEventListener("click", function(){
        myCarousel.prev();
    });
  
	// Cycles to the next item
    nextSlide.addEventListener("click", function(){
        myCarousel.next();
    });
  
	// Cycles the carousel to first slide
    slideOne.addEventListener("click", function(){
        myCarousel.to(0);
    });
  
  	// Cycles the carousel to second slide
    slideTwo.addEventListener("click", function(){
        myCarousel.to(1);
    });
  
  	// Cycles the carousel to third slide
    slideThree.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
<style>
/* Custom style to prevent carousel from being distorted 
   if for some reason image doesn't load */
.carousel-item{
    min-height: 280px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    
    <div id="myCarousel" class="carousel slide">        
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>
    </div>

<div class="text-center mt-4">
        <button type="button" class="btn btn-secondary" id="startSlide">Start</button>
        <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button>
        <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button>
        <button type="button" class="btn btn-secondary" id="nextSlide">Next</button>
        <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button>
        <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button>            
        <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button>
    </div>
</div>
</body>
</html>