使用 Flexslider 2 覆盖 CSS Display 属性

Question

我愿意隐藏在轮播 div 中 div#carousel_container- 在我的情况下 - this Flexslider 2.2 slider 所有 <li> 的某个类，但第一个。

我打算这样做的方式是将它们全部隐藏（显示：无），然后使用 jQuery 显示（显示：块）第一个 <li>，可以使用以下自定义属性 data-gal-order = 1 标识.

我尝试了几种方法：

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

2. 将!important 添加到#1。这成功地隐藏了我的项目，但是我无法使用 jQuery 将一些项目切换回 display:block。

3. 使用 jQuery 首先将display:none 属性设置为所有<li> 元素，然后将display:block 设置为目标元素。

   • 通过.css('display', 'none') 和相反。
   • 或通过.attr('style', 'float: left; display: none; width: 210px;') 和相反。

4. 在滑块声明之前或之后执行我的自定义脚本 #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)
   

但是，我的更改总是被添加到每个 <li> 元素的 style="float: left; display: block; width: 210px;" 覆盖。

我非常对我的 jQuery 脚本的选择器充满信心，例如，我设法按预期为所有 <li> 和/或目标属性添加了一个自定义属性。

但就更改 style="display" 属性而言，我现在迷路了，即使 我发现我的问题可能与 Flexslider 脚本的这一部分有关 (github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L892-924)？

任何想法将不胜感激！

---

2014 年 10 月 10 日几乎解决

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

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

Working Fiddle here

---

还有一个问题：见this comment

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 类来显示/隐藏元素。