Переопределить свойство CSS Display с помощью Flexslider 2

Я хочу скрыть в блоке карусели div#carousel_container- в моем случае - этот Flexslider 2.2 слайдер все <li> определенного класса, кроме первого.

Я планирую сделать это, чтобы скрыть их все (display: none), а затем использовать jQuery для отображения (display: block) первого <li>, который можно идентифицировать с помощью следующего настраиваемого атрибута data-gal-order = 1.

Я пробовал несколько способов:

1. Добавьте div#carousel_container .slides li {display:none;} в мою таблицу стилей, а затем используйте jQuery, чтобы изменить только свойство display нужного элемента на block.

2. Добавьте !important к №1. Это успешно скрывает мои элементы, но затем я не могу переключить некоторые обратно на display:block с помощью jQuery.

3. Используйте jQuery, чтобы сначала установить свойство display:none для всех <li> элементов, а затем установить display:block для целевых элементов.

   • throught .css('display', 'none') and opposite.
   • или через .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)
   

Однако мои изменения всегда отменяются, и style="float: left; display: block; width: 210px;" добавляется к каждому <li> элементу.

Я вполне уверен в селекторах моего сценария jQuery, так как, например, мне удалось добавить, как ожидалось, настраиваемый атрибут как для всех <li>, так и для целевых.

Но что касается изменения свойства style = "display", то сейчас я потерялся, даже если я понял, что моя проблема может быть связана с этой частью скрипта Flexslider (github.com/woothemes/FlexSlider/blob/master/ jquery.flexslider.js # L892-924)?

Любая идея будет очень признательна!

ПОЧТИ РЕШЕНИЕ 10.10.2014

Благодаря r4xz и Shikhar, мне удалось решить мою проблему следующим образом:

• Используя следующий класс: .hide-me { display: none !important; }
• включить указанные элементы до объявления ползунка
• добавить параметр selector: '.slides > li:not(.hide-me)' при объявлении гибкого слайдера карусели.
• Что касается несвязанной побочной проблемы, о которой я упоминал в комментариях, это просто то, что кажется мне нелогичным: itemMargin margin служит не для добавления поля к элементу - это должно быть сделано с помощью CSS - а для того, чтобы сообщить flexslider сколько разницы между ними вы добавили в свой CSS, чтобы он автоматически рассчитал соответствующую ширину ползунка.

Здесь рабочий скрипт

ЕЩЕ ОДНА ПРОБЛЕМА: см. этот комментарий