Блог

Используя оба компонента начальной загрузки, 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();
  }
}); 
  

Можно поместить карусель начальной загрузки во всплывающую подсказку или всплывающее окно. Взгляните на несколько примеров: http://codepen.io/_danko/pen/wavmjG

Причина, по которой это не работает в вашем случае, заключается в том, что он (carousel) не инициализирован. Вы можете инициализировать его чем-то вроде этого:

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

После дальнейшего чтения всплывающие окна Bootstrap создают динамический контент, поэтому это невозможно.