2

1 つのページで「基本的な flexlisder」( http://flexslider.woothemes.com/index.html ) と「基本的なカルーセル」( http://flexslider.woothemes.com/basic-carousel.html ) を使用しようとすると、カルーセルが正しく表示されません。クラス名の衝突が原因だと思いました（両方とも にあるため<div class="flexslider">）。しかし、flexslider ページのソース コードを分析したところ<div class="flexslider carousel">、サンプルに書かれているものとは異なり、カルーセルを に配置していることがわかりましたが、それでも役に立ちませんでした。カルーセルは引き続きスライダーのように動作します。

また、flexcarousel と呼ばれる新しいクラスのスタイルをコピーしようとしましたが、うまくいきませんでした (jquery 呼び出しを変更した後でも)。シンプルなページで動作するスライダーとカルーセルの簡単な例はありますか?

私のJavaScript：

<script type="text/javascript">

                    //slideshow
                    $(window).load(function() {
                        $('.flexslider').flexslider({
                            animation : "slide",
                            start : function(slider) {
                                $('body').removeClass('loading');
                            }
                        });
                    });
                    //carousel
                    $(window).load(function() {
                        $('.flexcarousel').flexslider({
                            animation : "slide",
                            animationLoop : false,
                            itemWidth : 210,
                            itemMargin : 5,
                            minItems : 2,
                            maxItems : 4
                        });
                    });

</script>
4

1 に答える 1

1

itemWidthカルーセル クラスは実際にはカルーセルにはしません。オプション内でを使用してアイテムに幅を割り当てる必要があります。

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,  // Must have a size set for it to switch to carousel view.
  });
});

異なる ID を使用して、個々の flexslider をターゲットにするようにしてください (複数ある場合)。

<div id="main-slider" class="flexslider">
<div id="secondary-slider" class="flexslider">
于 2013-08-09T18:50:22.060 に答える