Flexslider 无法识别动态加载的内容？

Question

我正在使用 SoundCloud API 将艺术品作为 ul 通过 JavaScript 加载到 HTML 文档中，使用 instructions I found here，然后使用 Flexslider 在封面的轮播中滑动（包裹在 li 标签中）。当列表项被硬编码到 HTML 文档中时，这工作正常，但是，当我使用加载脚本从 API 动态检索艺术品作为 img 并将它们注入 DOM 时，Flexslider 不注册尽管在 SoundCloud 脚本之后加载了 Flexslider 脚本，但它们在那里并向lis 添加了必要的样式。谁能告诉我如何让 Flexslider 拾取动态内容？这是我的文件：

HTML (sn-p)

<div class="page-container">
    <section id="work">
        <h3>Work</h3>
        <p>Check out my latest mixes below.</p>
        <div class="sc-stream">
            <ul class="cover-flow clearfix">
                <!-- Covers inject here -->
            </ul>
        </div>
    </section>
    <hr>
</div><!-- End page-container -->

<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="js/vendor/soundmanager2.js"></script>
<script src="js/sc-custom-player.js"></script>

<script src="js/flexslider.min.js"></script>
<script src="js/main.js"></script>

sc-custom-player.js

同file found here

main.js

$(document).ready(function() {

    $('.sc-stream').flexslider({
        namespace:  "sc-",
        animation:  "slide",
        selector:   ".cover-flow > li",
        slideshow:  false,
        controlNav: false,
        minItems:   1,
        itemWidth:  224,
        itemMargin: 8
    });

});

如果您还需要什么，请告诉我。提前致谢。

Answer 1

您可能需要稍微延迟才能让数据先完全加载？使用 setTimeout 对我当前的项目有效：

HTML

<div class="flexslider">
    <ul class="slides"></ul>
</div>

JS

$(function () {

function initGame() {
    // load xml data file (from same domain)
    // iterate xml elements and load <li>s into HTML variable

    $(HTML).appendTo('.slides');

    setTimeout(function () {
        startGame();
    }, 500);
}

function startGame() {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        randomize: true,
        directionNav: false,
        touch: true,
        after: function (slider) {
            $(".flex-control-nav li").removeClass("active");
            $(".flex-active").parent().addClass("active");
        },
        itemMargin: 5
    });
}

initGame();

});

Answer 2

目前你已经在$(document).ready函数中编写了flexslider代码

动态加载内容后必须编写如下代码

$('.sc-stream').flexslider({
    namespace:  "sc-",
    animation:  "slide",
    selector:   ".cover-flow > li",
    slideshow:  false,
    controlNav: false,
    minItems:   1,
    itemWidth:  224,
    itemMargin: 8
});

Answer 3

这是一个可能的解决方案。

function CreateBrandsGallery() {
  $.getJSON("services/products/read.php?req=brands", function(data) {
    $.each(data.product_brand, function(i,data) {
      var box = "<li class='add-bord-left'>";
      box += "<div class='brand_carousel_box_img remove-over add-bord-radius fl_left'><a class='item_detail_box' href='products.php?req=allproducts&art="+data.brand_id+"'>";
      box += "<img src='"+data.brand_preview+"' />";
      box += "</a></div>";
      box += "</li>"
      $(box).appendTo('div.brands_gallery ul');
      setTimeout(function () { ProductSBrandsGallerySlider(); }, 500);
    });
  });   
}

还有其他功能：

function ProductSBrandsGallerySlider() {
  $('.brands_gallery,.products_new_gallery').flexslider({
    animation: "slide",
    animationLoop: true,
    reverse: false,
    slideshowSpeed: 7000,
    animationSpeed: 500, 
    itemWidth: 233,
    itemMargin: 0,
    minItems: 4,
    maxItems: 4,
    randomize: true,
    pauseOnHover: true,
    initDelay: 300
  });
}