在两个分开的滑块中匹配数据属性

我使用两个单独的滑块，一个用于显示图像，另一个用于显示相应的文本。包含文本的滑块需要始终显示所有文本，只需要与第一个滑块的当前幻灯片具有相同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

在两个分开的滑块中匹配数据属性

回答

相关问题