jquery - 使用 Flexslider 2 覆盖 CSS Display 属性

Question

我愿意躲在轮播div中div#carousel_container - 在我的例子中 - this Flexslider 2.2 slider所有<li>属于某个类(class)，但属于第一个类(class)。

我打算这样做的方法是将它们全部隐藏 (display:none)，然后使用 jQuery 显示 (display:block) 第一个 <li>可以使用以下自定义属性来标识 data-gal-order = 1 .

我试过几种方法:

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

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

3. 首先使用 jQuery 设置 display:none全部属性(property)<li>元素然后设置display:block到目标元素。

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

4. 在 slider 声明之前或之后执行我的自定义脚本 #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;" 覆盖添加到每个 <li>元素。

我非常对我的 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; }
• 在 slider 声明之前切换指定元素
• 添加selector: '.slides > li:not(.hide-me)'声明轮播的 flexslider 时的参数。
• 至于我在评论中提出的不相关的附带问题，这对我来说听起来是一个违反直觉的机器人:itemMargin margin 的作用不是为元素添加边距——这必须通过 CSS 来完成——而是告诉 flexslider 在你的 CSS 中添加了多少 toyou 之间的边距，以便它自动计算适当的 slider 宽度。

Working Fiddle here

---

仍然是一个问题:请参阅 this comment

Answer 1

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

首先切换 hide-me 类，然后使用选择器 ".slides > li:not(.hide-me)" 初始化 flexslider。我们这样做是为了根据您的要求选择合适的图像。现在，由 flexslider 完成的所有宽度计算都将基于可见的图像，即没有“隐藏我”类的图像。此处的 :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'
        });
    });