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上的数据轮播属性。

现在我的问题 我怎样才能将旋转木马分开。使用盒子产品上的carousel属性。我怎么能把这个旋转木马分开。这是我的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() ;

Doc for html 5数据属性：

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

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

flexslider上的数据轮播

2 个答案: