Question

我正在尝试从“共享点”列表中动态生成轻快性轮播。硬编码时，轮播可以正常工作。当我从“共享点”列表中拉出项目时，效果不佳。我注意到的是，从列表中注入的代码被放置在由flickity javascript代码生成的“ .flickity-slider”类之外。

这是硬编码的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”类是由flickity JS代码生成的。

<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>

这是我的标记。我创建了一个ID来注入动态生成的代码。

<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位于flickity-slider div之外。下面是我编写的从SP列表中提取数据的Javascript。

$(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

enter image description here enter image description here

从共享点列表中提取项目时，Flickity Carousel无法正常工作

0 个答案: