bootstrap 5 carousel 不会自动启动旋转

如何解决bootstrap 5 carousel 不会自动启动旋转

我使用 javascript 定义了一个 bootstrap 5 carousel。
在 $(document).ready 中，我放置了一个功能来通过 id 检查某个元素，如果存在，我的脚本将呈现轮播。
当我使用纯生成的 html 时，它工作正常。当我使用 java 脚本生成 html 时，默认情况下不会开始旋转。只有在我点击某个箭头手动旋转幻灯片后，它才会开始旋转。
<head>
  <Meta charset="UTF-8">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="fontawesome\css\all.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  
    class FeaturedContentComponent {
      
      constructor(componentId,apiHost,client,apiKey,apiRoute) {
        this.componentId = componentId;
        this.apiHost = apiHost;
        this.client = client;
        this.apiKey = apiKey;
        this.service_data;
        this.apiRoute = apiRoute;
        this.carouselId = componentId + "_carousel"
        this.carouselContentId = componentId + "_carousel_content";
        this.carouselIndicatorId = componentId + "_carousel_inidcators";
      }

      render_component(){
        if (!$('#' + this.componentId).length) { 
          return; 
        }
        // create the static layout
        this.make_layout();
        
        var self = this;
        // mock service used
        $.ajax({
          url: "https://jsonplaceholder.typicode.com/todos/1",beforeSend: function (request)
          {
            request.setRequestHeader("x-api-key",self.apiKey);
          },method: 'GET',success: function(data,status){   
          //mock data
            self.service_data = [
                                  {
                                    "link": "https://example.com","description": "Description A","headline": "Headline A"
                                  },{
                                    "link": "https://example.com","description": "Description B","headline": "Headline B"
                                  },"description": "Description C","headline": "Headline C"
                                  },"description": "Description D","headline": "Headline D"
                                  }
                                ];
            let count = Math.floor(Math.random() * self.service_data.length);
            let headline = self.service_data[count].headline;
            let link = self.service_data[count].link;
            let description = self.service_data[count].description;
            
            var active = " active";
            var indicatorStatus = "class='active' aria-current='true'";
            for (var i = 0; i < self.service_data.length; i++){
              if(i>0){
                active = "";
                indicatorStatus = "";
              }
              let index_ = (count + i) % self.service_data.length;

              let x = "<div class='carousel-item" + active + "'> \
                    <div class='carousel-caption'> \
                      <h3>" + self.service_data[index_].headline + "</h3> \
                      <p>" + self.service_data[index_].description + "</p> \
                      <a class='btn btn-primary btn-sm' href='" + self.service_data[index_].link  + "' role='button' target='_blank'>Take a look &nbsp;&nbsp;<i class='fas fa-external-link-alt'></i></a> \
                    </div> \
                  </div>";
              $("#" + self.carouselContentId).append(x);
              let y = "<button type='button' data-bs-target='#" + self.carouselId + "' data-bs-slide-to='"+ i + "'" + indicatorStatus +  "aria-label='Slide 1'></button>"
              $("#" + self.carouselIndicatorId).append(y);
            }
          }
        });
      }
      make_layout(){
        let static_html = "\
            <div> \
              <div> \
                <style> \
                  #" + this.carouselId + "{ \
                    background-color: #000; \
                  } \
                  .carousel{ \
                    margin-top: 1px; \
                  } \
                  .carousel-inner{ \
                    height: 200px; \
                  } \
                  .carousel-caption{ \
                    color: #fff; \
                    top: 50%; \
                  } \
                </style> \
                <div> \
                  <div id='"+ this.carouselId + "' class='carousel slide' data-bs-ride='carousel'> \
                    <div id='" + this.carouselIndicatorId + "' class='carousel-indicators'></div> \
                    <div id='" + this.carouselContentId + "' class='carousel-inner'></div> \
                    <a class='carousel-control-prev' href='#"+ this.carouselId + "' role='button' data-bs-slide='prev'> \
                      <span class='carousel-control-prev-icon' aria-hidden='true'></span> \
                      <span class='visually-hidden'>PrevIoUs</span> \
                    </a> \
                    <a id='test' class='carousel-control-next' href='#"+ this.carouselId + "' role='button' data-bs-slide='next'> \
                      <span class='carousel-control-next-icon' aria-hidden='true'></span> \
                      <span class='visually-hidden'>Next</span> \
                    </a> \
                  </div> \
                </div> \
              </div> \
            </div> \
        ";
        $('#' + this.componentId).append(static_html);

      }  
    }
    
    var fcc = new FeaturedContentComponent('featured',"","");
    
    $(document).ready(function() {
      
      fcc.render_component();


    });
  </script>
</head>
<body class="m-5">  
  <div id='featured'></div>
</body>