使用Flexslider 2覆盖CSS Display属性

我愿意隐藏在旋转木马div div#carousel_container – 在我的情况下 – 这个Flexslider 2.2滑块所有

的某个类但是第一个 。

我计划这样做的方法是将它们全部隐藏（显示：无），然后使用jQuery显示（显示：块）第一个

，可以用以下自定义属性data-gal-order = 1来识别data-gal-order = 1 。

我尝试了几种方法：

1. 在我的样式表中添加div#carousel_container .slides li {display:none;} ，然后使用jQuery仅将所需元素的display属性更改为block 。

2. 添加!important对＃1 !important 。 这成功隐藏了我的项目，但后来我无法切换回display:block使用jQuery display:block 。

3. 使用jQuery首先将display:none属性设置为所有

4. 元素，然后将display:block设置为目标元素。
   • 通过.css('display', 'none')和相反。
   • 或者通过.attr('style', 'float: left; display: none; width: 210px;')和相反的。

5. 在滑块声明之前或之后执行我的自定义脚本＃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月解决

感谢r4xz和Shikhar，以下是我设法解决问题的方法：

• 使用以下类： .hide-me { display: none !important; } .hide-me { display: none !important; }
• 在滑块声明之前切换指定的元素
• 在声明轮播的flexslider时添加selector: '.slides > li:not(.hide-me)'参数。
• 至于我在评论中提到的不相关的问题，它只是听起来像我反直觉的机器人： itemMargin边距不能为元素添加边距 – 这必须通过CSS完成 – 但告诉flexslider您在CSS中添加了多少余量，以便自动计算相应的滑块宽度。

在这里工作小提琴

---

还有一个问题：看到这个评论

Answer 1

根据您所分享的js-fiddle ，可以通过以下方法解决问题 –

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

  $(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' }); }); 

Answer 2

第二种方式听起来不错，但需要一点改进：

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

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