한 페이지에 두 개의 부트 스트랩 캐 러셀을 연결하십시오.

Question

흥미로운 사례가 있습니다. 한 페이지에 두 개의 회전식 테이블과 다른 테이블을 제어하는 ​​회전식 테이블이 필요합니다.
http://jsbin.com/bozenixiriko/1/

숫자를 클릭하면 관련 동영상 슬라이드로 이동해야합니다. 그리고 비디오 캐 러셀에서 다음을 클릭하면 숫자 회전식 캐 러셀이 이동해야합니다.

이 기능을 어떻게 달성 할 수 있습니까?

Answer 1

나는 이것이 당신이 필요로하는 것보다 조금 더 복잡 할 수도 있다고 생각합니다. 당신의 jsbin이 만료되었습니다. 그래서 나는 새로운 바이올린을 만들었습니다. 이 과정에서 일부 마크 업을 최적화했습니다 (아래 참고 사항 참조).

DEMO

HTML :

<div class="container-fluid" id="slider"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div id="carousel-text"> 
       <h3></h3> 
      </div><!--/#carousel-text--> 
     </div><!-- /.col-xs-12 #slider --> 
     <div class="col-xs-12 hidden-xs carousel slide" data-type="multi" id="numberCarousel"> 
      <div class="carousel-inner row"> 
       <div class="item active"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="0"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">1</i> 
          </span> 
         </a> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="1"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">2</i> 
          </span> 
         </a> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="2"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">3</i> 
          </span> 
         </a> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="3"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">4</i> 
          </span> 
         </a> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="4"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">5</i> 
          </span> 
         </a> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="5"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">6</i> 
          </span> 
         </a> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="6"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">7</i> 
          </span> 
         </a> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="col-xs-2"> 
         <a data-target="#myCarousel" data-slide-to="7"> 
          <span class="fa-stack fa-3x"> 
           <i class="fa fa-circle-o fa-stack-2x"></i> 
           <i class="fa fa-stack-1x">8</i> 
          </span> 
         </a> 
        </div> 
       </div> 
      </div><!-- /.carousel-inner.row --> 
      <a class="left carousel-control" href="#numberCarousel" data-slide="prev"> 
       <span class="icon-prev"></span> 
      </a> 
      <a class="right carousel-control" href="#numberCarousel" data-slide="next"> 
       <span class="icon-next"></span> 
      </a> 
     </div><!-- /#numberCarousel --> 
     <div class="col-xs-12" id="carousel-bounding-box"> 
      <div class="carousel slide" id="myCarousel"> 
       <div class="carousel-inner"> 
        <div class="active item" data-slide-title="Financial Derivatives - Lecture 01"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/KuJkFqBWpl0"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
        <div class="item" data-slide-title="Financial Derivatives - Lecture 02"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/GXtxgzZkSZo"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
        <div class="item" data-slide-title="Financial Derivatives - Lecture 03"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/aoUSUX2D5Is"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
        <div class="item" data-slide-title="Financial Derivatives - Lecture 04"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mgjBV9sWdIE"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
        <div class="item" data-slide-title="Financial Derivatives - Lecture 05"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/orqUpKfSbrc"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
        <div class="item" data-slide-title="Financial Derivatives - Lecture 06"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/joXhxg8MAyc"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
        <div class="item" data-slide-title="Financial Derivatives - Lecture 07"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/2SSsaIt9LCk"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
        <div class="item" data-slide-title="Financial Derivatives - Lecture 08"> 
         <div class="embed-responsive embed-responsive-16by9"> 
          <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/BJiEAU5OKiU"></iframe> 
         </div> 
         <br /> 
         <button type="button" class="btn btn-default">Crear apunte</button> 
         <button type="button" class="btn btn-default pull-right">Saltear a ejercicio</button> 
        </div> 
       </div><!-- /.carousel-inner --> 
       <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
        <span class="icon-prev"></span> 
       </a> 
       <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
        <span class="icon-next"></span> 
       </a> 
      </div><!-- /#myCarousel --> 
     </div><!-- /#carousel-bounding-box --> 
    </div><!--/.row--> 
</div><!--/.container-fluid--> 

CSS :

#numberCarousel { 
    padding: 40px; 
} 
#numberCarousel .carousel-inner { 
    margin-left: 0; 
} 
#numberCarousel .item { 
    text-align: center; 
    cursor: pointer; 
} 
#numberCarousel .carousel-inner > .next { 
    left: 16.66666667%; 
} 
#numberCarousel .carousel-inner > .prev { 
    left: -16.66666667%; 
} 
#numberCarousel .carousel-inner > .next.left, 
#numberCarousel .carousel-inner > .prev.right { 
    left: 0; 
} 
#numberCarousel .carousel-inner > .active.left { 
    left: -16.66666667%; 
} 
#numberCarousel .carousel-inner > .active.right { 
    left: 16.66666667%; 
} 
.carousel-control.left, .carousel-control.right { 
    background-image: none; 
} 
.carousel-control { 
    width: 10%; 
} 
#numberCarousel .carousel-control .icon-prev, #numberCarousel .carousel-control .icon-next { 
    transform: translate(0, -50%); 
} 

JS :

// Initalize the "slide" title 
$('#carousel-text>h3').text($('#myCarousel .active').data('slide-title')); 

// Initalize the carousels setting the interval to none 
// This could also be done by just setting the data-interval to 0 in the markup 
$('#myCarousel, #numberCarousel').carousel({ 
    interval: 0 
}); 

// Make the thumbnail slider increment one at at time 
$('.carousel[data-type="multi"] .item').each(function() { 
    var next = $(this).next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    for (var i = 0; i < 4; i++) { 
     next = next.next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 

     next.children(':first-child').clone().appendTo($(this)); 
    } 
}); 

// When the carousel slides, auto update the text 
// and move the corresponding number slide to be active 
$('#myCarousel').on('slid.bs.carousel', function() { 
    activeslide = $(this).find('.active'); 
    $('#carousel-text>h3').text(activeslide.data('slide-title')); 
    $('#numberCarousel').carousel(activeslide.index()); 
}); 

마크 업을 따르기가 더 어려워지는 여러 중첩 된 div가 필요합니다. 또한 단순화의 관점에서 볼 때 '텍스트'또는 제목은 '슬라이드'에 직접 데이터 속성으로 저장됩니다. 숨겨진 div의 마크 업에 해당 정보를 저장하는 것은 실제로 의미가 없습니다. 제목 텍스트를 데이터 속성으로 포함시키는 것이 더 의미 있고 자연 스럽습니다. 코드 작성, 유지 보수 및 테스트가 더 쉬워졌습니다. DOM에 여러 번 돌아가서 페이지의 텍스트를 업데이트하지 않아도됩니다.

주된 변화는 부트 스트랩 캐로 셀에 내장 된 데이터 속성을 사용하여 항목이 하나의 회전식 컨베이어에서 클릭 될 때 주 회전식 컨베이어를 슬라이딩 제어하는 ​​것이 었습니다. 이것은 기능에 내장되어 있습니다. 추가 자바 스크립트가 필요하지 않으므로 dev, 유지 관리 및 테스트가 줄어 듭니다 (사용자가 약간만 다운로드 한 경우에도 약간의 다운로드 만 가능).

마지막으로 다음/이전 버튼을 클릭 할 때 번호 회전식을 동기화하려면 각 회전식 슬라이드의 순서가 같은 항목 수가 동일하므로 번호 매기기를 통과하면 활성 슬라이드의 색인 만 전달하면됩니다 주요 회전 목마에.