2 개의 개별 슬라이더에서 데이터 속성 일치

하나는 이미지를 표시하고 다른 하나는 해당 텍스트를 표시하는 두 개의 개별 슬라이더를 사용하고 있습니다. 텍스트가있는 슬라이더는 항상 모든 텍스트를 표시해야하며 첫 번째 슬라이더에서 현재 슬라이드와 동일한 데이터 속성을 가진 텍스트 만 "활성"클래스를 추가하여 색상을 변경해야합니다. 첫 번째 슬라이더에서 어떤 이미지가 표시되는지에 상관없이 모든 텍스트가 표시되어야하므로 두 슬라이더를 결합 할 수 없습니다.2 개의 개별 슬라이더에서 데이터 속성 일치

제 질문은 두 개의 슬라이더에있는 두 개의 데이터 속성을 어떻게 일치시켜 두 번째 슬라이더에있는 하나의 요소에만 활성 클래스를 추가할까요? 여기

내 코드는 지금까지 있습니다 :

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를 추가하여 수행 할 수 있습니다

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

이 제어 탐색 슬라이더를 연결하고 그들은 클래스와 상태를 공유해야합니다. 컨트롤 네비게이션이 설정되는 순서는 flexlider에 대한 해당 슬라이드 순서와 일치해야한다고 생각합니다 (네비게이션 항목의 색인은 슬라이드의 색인과 일치해야합니다).

일단 이것이 설정되면 그에 따라 스타일을 지정할 수있는 슬라이드 및 컨트롤 탐색에 대한 활성 상태가 있어야합니다. 희망이 도움이!

출처

2014-04-21 18:20:45

그래, 두 번째 ul이 실제로 슬라이더 일 필요는 없다고 생각합니다. 나는 항상 보여줄 수있는 목록 요소를 가진 정상적인 ul로 머물러있을 수 있다고 생각합니다. 첫 번째 슬라이더가 변경 될 때 변경되는 유일한 것은 해당 이름이며 텍스트 색상입니다. – rklitz

2 개의 개별 슬라이더에서 데이터 속성 일치

답변

관련 문제