Question

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

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

我尝试了几种方法：

在我的样式表中添加div#carousel_container .slides li {display:none;}，然后使用jQuery仅将所需元素的display属性更改为block。
将!important添加到＃1。这成功隐藏了我的项目，但后来我无法用jQuery将其切换回display:block。
使用jQuery首先将display:none属性设置为所有<li>元素，然后将display:block设置为目标元素。
- 通过.css('display', 'none')和对面。
- 或通过.attr('style', 'float: left; display: none; 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;"添加到每个<li>元素。

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

但就改变风格=＆＃34;显示＆＃34;财产问题即使我现在失去了 我发现我的问题可能与Flexslider脚本的这一部分有关（github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L892-924）？

任何想法都会非常感激！

几乎已于2014年10月解决

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

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

Working Fiddle here

仍有一个问题：见this comment

Answer 1

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

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

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

Answer 2

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

首先切换hide-me类，然后使用选择器“初始化flexslider。”slides＆gt; li：not（.hide-me）“。我们这样做是为了根据您的要求选择合适的图像。现在，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'
        });
    });

使用Flexslider 2覆盖CSS Display属性

几乎已于2014年10月解决

仍有一个问题：见this comment

2 个答案: