Соответствие атрибутов данных в двух отдельных слайдерах

Question

Я использую два отдельных ползунка, один для отображения изображений, а другой для отображения соответствующего текста. Ползунок с текстом должен показывать весь текст все время, только текст, который имеет тот же атрибут данных, что и текущий слайд, с первого слайдера, чтобы изменить цвет, добавив «активный» класс. Поскольку весь текст должен отображаться независимо от того, какое изображение отображается с первого слайдера, я не могу объединить два ползунка.

Мой вопрос заключается в том, как совместить два атрибута данных с двумя отдельными ползунками, чтобы добавить активный класс к одному элементу во втором слайдере.

Вот мой код до сих пор:

jQuery(document).ready(function() { 
     jQuery('.flexslider').flexslider({ 
      animation: "fade" 
     }); 


     // if the class .flex-active-slide is being used on an li 
     // if data-roles are the same # 
     if ('ul.slides li.flex-active-slide' && 'ul.slides li[data-role] == ul.slider-text li[data-role]') { 

      // add active class to selected li in second slider 
      jQuery("ul.slider-text li").addClass('active'); 
     } 
    }); 


#########SLIDER 1 ################# 


<div class="flexslider"> 
     <ul class="slides"> 
      <li data-role="1"><img src="/media/island/content/cool-places/1_PARROT_CAY.jpg"/></li> 
      <li data-role="2"><img src="/media/island/content/cool-places/2_CUISINART.jpg"/></li> 
      <li data-role="3"><img src="/media/island/content/cool-places/3_LITTLE_PALM.jpg"/></li> 
      <li data-role="4"><img src="/media/island/content/cool-places/4_RITZ_CAYMAN.jpg"/></li> 
      <li data-role="5"><img src="/media/island/content/cool-places/5_REGENT.jpg"/></li> 
      <li data-role="6"><img src="/media/island/content/cool-places/6_KIAWAH.jpg"/></li> 
      <li data-role="7"><img src="/media/island/content/cool-places/7_FOUR_SEASONS.jpg"/></li> 
      <li data-role="8"><img src="/media/island/content/cool-places/8_SEA_ISLAND.jpg"/></li> 
      <li data-role="9"><img src="/media/island/content/cool-places/9_CHEECA.jpg"/></li> 
      <li data-role="10"><img src="/media/island/content/cool-places/10_RITZ_NAPLES.jpg"/></li> 
      <li data-role="11"><img src="/media/island/content/cool-places/11_PINK_SANDS.jpg"/></li> 
     </ul> 
    </div> 


############### SLIDER 2 ##################### 

<ul class="slider-text"> 
     <li data-role="1"><p class="uppercase">parrot cay &bull; turks and caicos</p></li> 
     <li data-role="2"><p class="uppercase">sea island golf club &bull; sea island</p></li> 
     <li data-role="3"><p class="uppercase">ritz carlton &bull; naples</p></li> 
     <li data-role="4"><p class="uppercase">cheeca lodge &bull; islamorada</p></li> 
     <li data-role="5"><p class="uppercase">ritz carlton &bull; grand cayman</p></li> 
     <li data-role="6"><p class="uppercase">four seasons &bull; palm beach</p></li> 
     <li data-role="7"><p class="uppercase">little palm island &bull; little torch key</p></li> 
     <li data-role="8"><p class="uppercase">kiawah island golf resort &bull; kiawah island</p></li> 
     <li data-role="9"><p class="uppercase">regent palms &bull; turks & caicos</p></li> 
     <li data-role="10"><p class="uppercase">cuisinart &bull; anguilla</p></li> 
     <li data-role="11"><p class="uppercase">pink sands resort &bull; harbor island</p></li> 
    </ul> 

Answer 1

Прежде всего позвольте мне начать с вопроса, если нужно отобразить во все времена второй список, почему он должен быть слайдер?

Независимо от того, что вы хотите сделать, это добавить пользовательский элемент управления nav. Это может быть достигнуто путем добавления свойства manualControls к объекту инициализации, например, так:

jQuery('.flexslider').flexslider({ 
    animation: "fade", 
    manualControls: '.slider-text li' 
}); 

Это позволит связать ползунок с нав управления, и они должны разделять классы и государство. Я считаю, что порядок, в котором настройка управления навигацией, должен соответствовать координирующему порядку слайдов для flexslider (индекс для элемента nav должен соответствовать индексу для слайда).

После того, как это настроено, вы должны иметь активные состояния как для слайда, так и для элемента управления, который вы можете соответствующим образом настроить. Надеюсь это поможет!