弹出式视窗内的轮播-引导程序

Question

Using both Bootstrap components carousel and popover, I have encountered some conflict. I need to utilize the carousel inside the popover, however they don't play nice together. Is there a reason for this?

Essentially the concept is pretty simple, if you want to login, the form is inside the popover and if you want to register, utilise the carousel inside the popover and slide to register form.

Any Ideas?

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

It is possible to put bootstrap carousel inside tooltip or popover. Take a look at some examples: http://codepen.io/_danko/pen/wavmjG

Reason why it does not work in your case is because it (carousel) is not initialized. You can initialize it with something like this:

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

Answer 2

在进一步阅读Bootstrap弹出窗口后，将创建动态内容，因此这是不可能的。