1. 首页
  2. 问答
  3. 在一页上链接两个Bootstrap传送带

在一页上链接两个Bootstrap传送带

2014-10-11 60 views
0

我有一个有趣的情况，我想在一个页面上放置两个传送带，并在另一个传送带上放置一个传送带。
请参阅http://jsbin.com/bozenixiriko/1/在一页上链接两个Bootstrap传送带

如果我点击数字，它应该移动到相关的视频幻灯片。如果我点击视频轮播中的下一个，它应该移动号码轮播。

你能告诉我如何实现这个功能吗？

来源

2014-10-11 Nikhil Daga

+0

你可以发布你到目前为止的代码（JS，HTML）吗？ – JME 2014-10-11 05:42:07

+0

你看过轮播的'events'文档吗？有一个甚至可以告诉你什么时候旋转木马已经改变 – 2014-10-11 05:48:36

+0

JME：请检查http://jsbin.com/bozenixiriko/1/edit – 2014-10-11 06:29:00

回答

0

我想你可能会使它比需要的复杂一点。你的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()); 
});

你有几个不需要的嵌套divs让你的标记更难以遵循。另外，从简化的角度来看，“文本”或标题直接作为数据属性存储在“幻灯片”上。将这些信息存储在隐藏div中的标记是没有意义的。将标题文本作为数据属性包括在内更具语义和自然性;更容易编码，维护和测试;并且无需多次返回DOM来更新页面上的文本。

主要变化是使用Bootstrap旋转木马中内置的数据属性来控制在数字旋转木马中单击其中一个项目时滑动主旋转木马。这是建立在功能。它不需要任何额外的JavaScript，这意味着更少的开发，维护和测试（即使只有几个字节，用户的下载量也会稍小）。

最后，点击next/prev按钮以获得数字轮播同步，因为每个轮播具有相同顺序的相同数量的项目，您只需将数字轮播通过活动幻灯片的索引在主旋转木马中。

来源

2014-10-12 18:33:35 jme11

+0

这是完美的。非常感谢。 :)我从你的代码中学到了东西。表示活动幻灯片的数字可能是在中间而不是在开头？ – 2014-10-13 23:05:08

+0

我改变了$（'＃numberCarousel'）。carousel（activeslide.index（））;'to'$（'＃numberCarousel'）。carousel（activeslide.index（） - 2）;':) – 2014-10-13 23:12:45

+0

，但是目前数字轮椅中有6个元素，所以中间的位置应该是3或4的位置？也许问题是你的用户更直观的问题是什么？也许最好为活动号码添加不同的颜色？ – jme11 2014-10-13 23:14:36

相关问题

 相关问题