Override CSS Display property with Flexslider 2

Question

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.

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.

I have tried several ways:

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.

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

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

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

4. 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)
   

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

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.

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)?

Any idea would be much appreciated!

---

ALMOST SOLVED ON 10/10/2014

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

• 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

---

STILL ONE ISSUE : see this comment

Answer 1

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

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

Answer 2

The second way sounds great, but needs a little improvement:

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

Now you can toggle the .hide-me class in specified li to show/hide element.