2

当我尝试在一页上使用“基本 flexlisder”（http://flexslider.woothemes.com/index.html）和“基本轮播”（http://flexslider.woothemes.com/basic-carousel.html）时，轮播显示不正确。我猜这是冲突类名的错（因为两者都在<div class="flexslider">）。但是，在 flexslider 页面上分析源代码后，我发现他们将轮播放在 中<div class="flexslider carousel">，与示例中写的不同，但仍然没有帮助。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 回答