Jquery 使用Flexslider 2替代CSS显示属性

我愿意躲在旋转木马div

div#旋转木马(carousel)容器中

——在我的情况下

属于某一类，但属于第一类

我计划这样做的方式是将它们全部隐藏（display:none），然后使用jQuery显示（display:block）第一个

，它可以用以下自定义属性

data gal order=1

标识

我试过几种方法：

在我的样式表中添加

div#carousel_容器。幻灯片li{display:none；}

，然后使用jQuery仅将所需元素的

display

属性更改为

block

添加

！重要信息

至#1。这成功地隐藏了我的项目，但是我无法使用jQuery将一些项目切换回

display:block

使用jQuery首先将

display:none

属性设置为所有

元素，然后将

display:block

设置为目标元素

• 通过

  .css（'display'，'none'）

  和相反方向
• 或者通过

  .attr（'style'，'float:左；display:无；width:210px；'））和相反的方式

在滑块声明之前或之后执行自定义脚本#2-即

//my custom script [before]

//slider declaration
$('div#carousel_container').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 210,
                itemMargin: 5,
                asNavFor: 'div#slider_container'
});

//OR my custom script [after] (also tried with different load/ready event)

但是，我的更改总是被添加到每个

元素的

style=“float:left；display:block；width:210px；”覆盖。

我对jQuery脚本的选择器非常有信心，例如，我成功地按预期为所有

和/或目标脚本添加了一个自定义属性

但就更改style=“display”属性而言，即使 我发现我的问题可能与Flexslider脚本的这一部分有关（github.com/woothemes/Flexslider/blob/master/jquery.Flexslider.js#L892-924）？

任何想法都将不胜感激

---

2014年10月10日几乎解决 感谢r4xz&Shikhar，以下是我解决问题的方法：

• 使用以下类：

  .hide me{display:none！important；}

• 在滑块声明之前切换指定的元素
• 在声明carousel的flexslider时添加

  选择器：'.slides>li:not（.hide me）

  参数
• 至于我在评论中提到的不相关的次要问题，对我来说这听起来有点违反直觉：

  itemMargin

  margin用于不向元素添加边距-这必须通过CSS来完成，但是要告诉flexslider您在CSS中添加了多少间距，以便它自动计算适当的滑块宽度

---

---

还有一个问题：参见第二种方法听起来不错，但需要一些改进：

.hide-me { display: none !important; }

现在，您可以在指定的li中切换.hide me类以显示/隐藏元素。

根据您的共享，问题可以通过以下方法解决-

首先切换hide me类，然后使用选择器初始化flexslider。slides>li:not（.hide me）。 我们这样做是为了根据您的要求选择合适的图像。现在，flexslider完成的所有宽度计算将基于可见的图像，即没有“隐藏我”类的图像。此处的：not（选择器）选择器匹配不是指定元素/选择器的每个元素

  $(function() {
        /* Toggle hide-me class*/
        var $liCarousel = $('#carousel_container li.img');
        $liCarousel.toggleClass('hide-me');
        $liCarousel.siblings('[data-ingal-order=1]').toggleClass('hide-me');

        $('#carousel_container').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 210,
            itemMargin: 5,
            asNavFor: 'div#slider_container',
            selector: '.slides > li:not(.hide-me)'
        });

        $('div#slider_container').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            directionNav:false,
            slideshow: false,
            sync: 'div#carousel_container'
        });
    });

---

使用

.toogleClass（'hide-me'）实现

它几乎可以正常工作，谢谢！然而，出现了一个附带问题。如果不需要的项目现在已成功取消，则它们不会用于转盘宽度计算。也就是说，例如，如果在我的旋转木马中显示了10个项目中的2个，则旋转木马的宽度仍然是10个项目的宽度。因此，即使在大屏幕上显示的2个元素足以显示其中的4个元素，也会启用上一个/下一个箭头的滚动，从而显示空白区域。。。另一个附带问题（但显然与.hide me类无关）-我不能让Flexslider的itemMargin参数工作…太好了，这是我需要的最后一步！按照您的方法Shikhar，我能够在不修改FlexSlider（FS）脚本的情况下完成这项任务。事实上，它提供了一个适合这种情况的参数。它现在工作得很好！感谢你们两位@r4xz和Shikhar！Fiddle中缺少注释标记闭包；而是检查一下这个：实际上几乎完美。。。当您单击旋转木马的最后一张幻灯片时，它会不断滚动空内容！你有没有一个主意，如何防止这种行动，只有在没有幻灯片后？真棒。我怎么没想到呢。将编辑我的答案，以纳入其中！由于我剩下的问题比最初在这里暴露的问题更具体，我刚刚在a中请求了一些帮助，如果我能在那里解决另一个问题，我也会在这里编辑我的问题。