flexslider上的數據傳送帶

Question

我用flexslider製作了傳送帶，但是我遇到了問題。我在頁面上有10多個輪播。每個旋轉木馬都有自己的課程。

這是HTML：

<div class="box-product-details hide" data-carousel="1"> 
    <div class="container"> 
     <div class="product-carousel"> 
      <ul> 
       <li><img src="../images/product-detail.jpg" height="338" width="430" alt="" /></li> 
       <li><img src="../images/product-detail.jpg" height="338" width="430" alt="" /></li> 
       <li><img src="../images/product-detail.jpg" height="338" width="430" alt="" /></li> 
      </ul> 
     </div><!-- /product-carousel --> 
    </div><!-- /container --> 
</div><!-- /box-product-details --> 
<div class="box-product-details hide" data-carousel="2"> 
    <div class="container"> 
     <div class="product-carousel"> 
      <ul> 
       <li><img src="../images/product-detail.jpg" height="338" width="430" alt="" /></li> 
       <li><img src="../images/product-detail.jpg" height="338" width="430" alt="" /></li> 
       <li><img src="../images/product-detail.jpg" height="338" width="430" alt="" /></li> 
      </ul> 
     </div><!-- /product-carousel --> 
    </div><!-- /container --> 
</div><!-- /box-product-details --> 

唯一的區別是包裝盒上的產品DIV數據輪播屬性。

現在我的問題 我該如何啓動旋轉木馬的所有分開。在盒子產品上帶有旋轉木馬屬性。我怎樣才能開始這個旋轉木馬分開。這是我的JavaScript。

$('.product-carousel').flexslider({ 
    namespace: "carousel-", 
    animation: 'fade', 
    selector: 'ul > li', 
}); 

Answer 1

$('.box-product-details[data-carousel="2"]').flexslider({ 
    namespace: "carousel-", 
    animation: 'fade', 
    selector: 'ul > li', 
}); 

，或者如果已經實例化

$('.box-product-details[data-carousel="2"]').play() ; 

文件對HTML 5數據屬性：

http://html5doctor.com/html5-custom-data-attributes/

http://api.jquery.com/data/

Answer 2

，如果你可以這樣做：

$('.product-carousel').each(function() { 
    var sliderCarousel = $(this).closest('.box-product-details').data('carousel'); 
    $(this).flexslider({ 
    // flexslider options and you can use sliderCarousel in here. 
    }); 
});