Question

使用Bootstrap组件carousel和popover，我遇到了一些冲突。我需要利用弹出窗口内的旋转木马，但他们不能在一起玩得很好。有这个原因吗？

基本上这个概念很简单，如果你想登录，表单就在popover内部，如果你想注册，可以使用popover内的轮播并滑动注册表单。

任何想法？

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

在您的情况下它不起作用的原因是因为它（carousel）未初始化。您可以使用以下内容对其进行初始化：

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

Answer 2

进一步阅读Bootstrap popovers后，创建动态内容，这是不可能的。

在popover里面的转盘 - bootstrap

2 个答案: