0

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',
 });
4

2 に答える 2

-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/

于 2013-03-25T18:32:05.503 に答える