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

如果可以的话：

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

Answer 2

 $('.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/