在兩個分開的滑塊中匹配數據屬性

我使用兩個單獨的滑塊，一個用於顯示圖像，另一個用於顯示相應的文本。包含文本的滑塊需要始終顯示所有文本，只需要與第一個滑塊的當前幻燈片具有相同data屬性的文本通過添加「活動」類來更改顏色。由於無論從第一個滑塊顯示什麼圖像都必須顯示所有文本，因此我無法合併這兩個滑塊。在兩個分開的滑塊中匹配數據屬性

我的問題是如何匹配來自兩個單獨滑塊的兩個數據屬性，以將活動類添加到第二個滑塊中的一個元素。

這裏是我到目前爲止的代碼：

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>

來源

2014-04-21 rklitz

首先讓我先問問自己：如果第二列表需要在任何時候都可以顯示出來，爲什麼它需要一個滑塊？

無論如何，這聽起來像你想要做的是添加一個自定義控制導航。這可以通過添加屬性manualControls到init的對象，像這樣來完成：

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

這將滑塊鏈接到控制導航，他們應該分享類和狀態。我相信控制導航的設置順序應該與flexslider的相應的幻燈片順序相匹配（導航項目的索引應該與幻燈片的索引相匹配）。

設置完成後，您應該對幻燈片和控件導航都有活動狀態，您可以相應地進行樣式設置。希望這可以幫助！

來源

2014-04-21 18:20:45

是的，我猜第二個ul並不需要是滑塊。我想它可以保持作爲一個正常的UL與總是顯示列表元素。而且唯一隨第一個滑塊更改而變化的是相應的名稱和文本顏色 – rklitz

在兩個分開的滑塊中匹配數據屬性

回答

相關問題