使用Flexslider 2覆盖CSS Display属性 [英] Override CSS Display property with Flexslider 2

问题描述

我愿意隐藏在旋转木马div div＃carousel_container - 在我的情况下 - 此Flexslider 2.2滑块所有< li> 某个类但第一个。

I am willing to hide in the carousel div div#carousel_container- in my case - of this Flexslider 2.2 slider all <li> of a certain class but the first one.

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

The way I'm planning to do it is to hide them all (display:none) and then use jQuery to display (display:block) the first <li> which can be identified with the following custom attribute data-gal-order = 1.

我尝试了几种方法：

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

1. Add div#carousel_container .slides li {display:none;} in my stylesheet and then use jQuery to change only the desired element's display property to block.

将！important 添加到＃ 1。这成功隐藏了我的项目，但后来我无法使用jQuery将某些内容切换回 display：block 。

Add !important to #1. This successfully hides my items, but then I am unable to switch some back to display:block with jQuery.

使用jQuery首先将 display：none 属性设置为所有< li> 元素，然后设置显示：阻止到目标元素。

Use jQuery to first set the display:none property to all <li> elements and then set display:block to the targeted elements.

• 整个。 css（'display'，'none'）和相反。


• 或通过 .attr（'style'，'float：left; display：none; width：210px;'）和对面。

• throught .css('display', 'none') and opposite.
• or through .attr('style', 'float: left; display: none; width: 210px;') and opposite.

在滑块声明之前或之后执行我的自定义脚本＃2，即

Executing my custom script #2 before or after the slider declaration - i.e.

//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> 元素。

However, my changes are always overridden with style="float: left; display: block; width: 210px;" added to every <li> element.

I我对我的jQuery脚本的选择器很有信心，例如我设法按预期添加一个自定义属性到所有< li> 和/或有针对性的。

I am quite confident with the selectors of my jQuery script as for instance I manage to add as expected a custom attribute both to all <li> and/or targeted ones.

但就改变style =display属性而言，我现在已经迷失了，即使
我认为我的问题可能与Flexslider脚本的这一部分有关（github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L892-924）？

But as far as changing the style="display" property is concerned I'm lost now even if I figured out my issue could be related this part of Flexslider script (github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L892-924)?

非常感谢任何想法！

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

Thanks to r4xz & Shikhar, here is the way I managed to solve my problem:

• 使用以下类： .hide-me {display：none！important; }


• 在指定元素之前切换滑块声明


• 添加 selector：'.slides> li：在声明轮播的flexslider时不是（.hide-me）'参数。


• 至于我在评论中提到的无关的问题，它只是一些东西这对我来说听起来很直观： itemMargin margin不会为元素添加边距 - 这必须通过CSS完成 - 但要告诉flexslider多少边距在你的CSS中加入你自动计算合适的滑块宽度。

• Using the following class: .hide-me { display: none !important; }
• toggle on specified elements before slider declaration
• add selector: '.slides > li:not(.hide-me)' parameter when declaring carousel's flexslider.
• As for the unrelated side issue I evocated in the comments, it is just something that sounds a bot counter-intuitive to me: itemMargin margin serves not to add a margin to element - this has to be done via CSS -, but to tell flexslider how much margin between toyou added in your CSS for it to calculate automatically the appropriate slider width.

在这里工作小提琴

Working Fiddle here

推荐答案

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

As per the js-fiddle you shared the problem can be solved by the following approach-

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

Toggle the hide-me class first and then initialize flexslider with the selector ".slides > li:not(.hide-me)". This we are doing so that we can select appropriate images as per your requirement. Now all the width calculations done by flexslider will be based on the images that are visible i.e. that don't have the "hide-me" class. The :not(selector) selector here matches every element that is NOT the specified element/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属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！