1

ここで見つけた手順を使用して、SoundCloud API を使用しulて Javascript を介して HTML ドキュメントにアートワークをロードし、 Flexsliderを使用してカバー (タグでラップ) のカルーセルをスライドさせます。これは、リスト アイテムが HTML ドキュメントにハードコードされている場合は正常に機能しますが、ロード スクリプトを使用してアートワークをAPI から動的に取得し、それらを DOM に挿入すると、Flexslider はそれらが存在することを登録しません。Flexslider スクリプトが SoundCloud スクリプトの後にロードされているにもかかわらず、必要なスタイリングを s に追加します。Flexslider が動的コンテンツを取得する方法を教えてもらえますか? ここに私のファイルがあります：liimgli

HTML (スニペット)

<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

ここにあるファイルと同じ


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
    });

});

他に何か必要な場合はお知らせください。前もって感謝します。

4

3 に答える 3

4

最初にデータが完全に読み込まれるようにするには、少し時間がかかるのではないでしょうか? 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();

});
于 2013-01-02T19:49:37.403 に答える
1

現在、関数でflexsliderコードを記述しています$(document).ready

コンテンツを動的にロードした後、次のコードを記述する必要があります

$('.sc-stream').flexslider({
    namespace:  "sc-",
    animation:  "slide",
    selector:   ".cover-flow > li",
    slideshow:  false,
    controlNav: false,
    minItems:   1,
    itemWidth:  224,
    itemMargin: 8
});
于 2013-01-01T13:17:35.757 に答える
0

これが可能な解決策です。

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
  });
}
于 2013-06-18T21:28:31.020 に答える