javascript - 弹出框内的旋转木马 - Bootstrap

Question

同时使用 Bootstrap 组件 carousel 和 popover，我遇到了一些冲突。我需要使用弹出框内的旋转木马，但它们不能很好地结合在一起。这是有原因的吗？

从本质上讲，这个概念非常简单，如果你想登录，表单就在弹出框内，如果你想注册，使用弹出框内的旋转木马并滑动以注册表单。

有什么想法吗？

Bootply :

HTML:

<div class="login-popover hide">
  <div class="row">
    <div class="col-md-12">
      <div id="login-register" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner"><!-- Wrapper for slides -->
          <div class="item active"> <!-- Active is always 1st image-->
              Login Content
          </div>           
          <div class="item">
              Register Content
          </div>        
        </div>
          <!-- Controls for carousel-->
          <a class="left carousel-control" href="#login-register" data-slide="prev">
            <span class="glyphicon glyphicon-circle-arrow-left"></span>
          </a>
          <a class="right carousel-control" href="#login-register" data-slide="next">
            <span class="glyphicon glyphicon-circle-arrow-right"></span>
          </a>
      </div>
    </div>
  </div>
</div>

Javascript:

$('.login-pop').popover({
 placement: 'bottom',
  container: '.popover-login',
  trigger: 'click',
  animation: false,
  template: '<div class="popover login" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
  html: true,
  content: function () {
      return $(this).next('.login-popover').html();
  }
}); 

Answer 1

可以将 Bootstrap 轮播放在工具提示或弹出框内。看一些例子: http://codepen.io/_danko/pen/wavmjG

它在您的情况下不起作用的原因是因为它(旋转木马)未初始化。你可以用这样的东西初始化它:

$('.login-pop').on('shown.bs.popover', function () {
  // initialize carousel…
  $('.carousel-inner').carousel();
});