Карусель Flickity не работает при извлечении элементов из списка Share PointRSS

Question

Я пытаюсь динамически сгенерировать карусель flickity из списка Share Point.Когда это жестко закодировано, карусель работает отлично.Когда я вытаскиваю элементы из списка Share Point, не совсем работает.Я заметил, что код, введенный из списка, размещается вне класса «.flickity-slider», который генерируется кодом javascript flickity.

Это жестко закодированная HTML-разметка

<div class="carousel-cell overContainer">
<img class="" src="/_catalogs/masterpage/V6/img/cyberHero1.jpg" alt="">
<div class="overlay1">
<div class="text">John Smith</div>
<p class="para">Information Technology Specialist</p>
<p class="para2"> <em>For his due diligence in log review.</em>
</p>
</div>
</div>

Вот так он рендерится на консоли.Как вы можете заметить, класс "flickity-slider" генерируется JS-кодом flickity.

<div class="flickity-slider" style="left: 0px; transform: translateX(-47.3%);">
   <div class="carousel-cell overContainer" style="position: absolute; left: 0%;" aria-hidden="true">
      <img class="" src="/_catalogs/masterpage/V6/img/cyberHero1.jpg" alt="">
      <div class="overlay1">
         <div class="text">John Smith</div>
         <p class="para">Information Technology Specialist</p>
         <p class="para2"> <em>For his due diligence in log review.</em>
         </p>
      </div>
   </div>
   <div class="carousel-cell overContainer" style="position: absolute; left: 27.93%;" aria-hidden="true">
      <img class="" src="/_catalogs/masterpage/V6/img/cyberHero2.jpg" alt="">
      <div class="overlay1">
         <div class="text">John Smith</div>
         <p class="para">Information Technology Specialist</p>
         <p class="para2"> <em>For his due diligence in log review.</em>
         </p>
      </div>
   </div>
   <div class="carousel-cell overContainer" style="position: absolute; left: 55.86%;" aria-hidden="true">
      <img class="" src="/_catalogs/masterpage/V6/img/cyberHero3.jpg" alt="">
      <div class="overlay1">
         <div class="text">John Smith</div>
         <p class="para">Information Technology Specialist</p>
         <p class="para2"> <em>For his due diligence in log review.</em>
         </p>
      </div>
   </div>
   <div class="carousel-cell overContainer is-selected" style="position: absolute; left: 83.78%;">
      <img class="" src="/_catalogs/masterpage/V6/img/cyberHero4.jpg" alt="">
      <div class="overlay1">
         <div class="text">John Smith</div>
         <p class="para">Information Technology Specialist</p>
         <p class="para2"> <em>For his due diligence in log review.</em>
         </p>
      </div>
   </div>
   <div class="carousel-cell overContainer" style="position: absolute; left: 111.71%;" aria-hidden="true">
      <img class="" src="/_catalogs/masterpage/V6/img/cyberHero5.jpg" alt="">
      <div class="overlay1">
         <div class="text">John Smith</div>
         <p class="para">Information Technology Specialist</p>
         <p class="para2"> <em>For his due diligence in log review.</em>
         </p>
      </div>
   </div>
   <div class="carousel-cell overContainer" style="position: absolute; left: 139.64%;" aria-hidden="true">
      <img class="" src="/_catalogs/masterpage/V6/img/cyberHero6.jpg" alt="">
      <div class="overlay1">
         <div class="text">John Smith</div>
         <p class="para">Information Technology Specialist</p>
         <p class="para2"> <em>For his due diligence in log review.</em>
         </p>
      </div>
   </div>
</div>

Это разметка, которую я имею.Я создал идентификатор для вставки динамически сгенерированного кода.

<div style="position: relative;" class="container-fluid">
     <div id="flickityCarousel" class="container carousel" data-flickity='{"autoPlay": 
      true, "wrapAround": true}'>
       <!--Inject Carousel Here-->
    </div>
</div>

Вот как он отображается в консоли при вводе кода

<div class="flickity-viewport" style="height: 0px; touch-action: pan-y;">
    <div class="flickity-slider" style="left: 0px;"></div>
</div>
<div class="carousel-cell overContainer"><img src=" /CyberSecurity/PublishingImages/medicalExaminer.jpg" "="" alt="">
    <div class="overlay1"> <div class="text">Stephanie Richter, Senior Toxicologist</div><p class="para">Office of Medical Examiner and 
Trauma Services From the Office of Medical Examiner and Trauma Services, Stephanie Richter, Senior Toxicologist, 
was selected as an Every Day Cyber Hero during our February Take the Challenge contest:  
“What You Can Do to Protect Your Devices?”
</p>
</div>
</div>

Как вы заметили код ячейки каруселиdiv находится за пределами скользящего слайдера.Ниже приведен Javascript, который я написал для извлечения данных из списка SP.

$(document).ready(function () {
  $.ajax({
    url: "/cyberSecurity/_api/web/lists/GetByTitle('cyberHeroes')/items",
    method: 'GET',
    headers: {
      'Accept': 'application/json; odata=verbose'
    },
    success: function (data) {
      var items = data.d.results;
     console.log(items);

     var flickityCarousel = $('#flickityCarousel');
     var carouselContent;

     for (var i = 0; i < items.length; i++) {
     carouselContent = '<div class="carousel-cell overContainer">' +
                               '<img src=" ' + items[i].Image.Url.replace("http://bc-net", "") + '"" alt="">'+
                               '<div class="overlay1">' +
                                  ' <div class="text">'+  items[i].Title +'</div>' +
                                  '<p class="para">'+items[i].Description +'</p>' +
                               '</div>' +
                          '</div>' ;
      console.log(carouselContent);
       flickityCarousel.append(carouselContent);


      }

 },
    error: function (data) {
      console.log('Error: ' + data);
    }
  }); // End Service Icons  //End Service Icons

}); // End ready function

введите описание изображения здесь введите описание изображения здесь