Question

我有OWL CAROUSEL的下一个问题。我正在使用单项选项和自动播放停止悬停选项。在每个项目的内部，我使用自举按钮打开模态。模态在OWL CAROUSEL之外。一切正常，直到我们到达旋转木马的最后一项。当我按下按钮时，模态打开，如果幻灯片更改（因为自动播放）并且我关闭模式它会断开。我也在悬停时删除了停止，在我打开最后一个模态后，旋转木马卡住了。

You can see the replicated issue here in jsfiddle

OWL CAROUSEL

<div id="owl-demo" class="owl-carousel">
  <div class="item">
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">MODAL</button>
    <img src="http://www.highsnobiety.com/files/2013/05/lamborghini-egoista-concept-car-9.jpg" alt="The Last of us">
  </div>
  <div class="item">
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">MODAL</button>
    <img src="http://www.highsnobiety.com/files/2013/05/lamborghini-egoista-concept-car-9.jpg" alt="The Last of us">
  </div>
</div>

BOOTSTRAP STANDARD MODAL

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-   labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
              ...
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
          </div>
      </div>
  </div>

CSS

#owl-demo .item img{
    display: block;
    width: 100%;
    height: 300px;
}

#owl-demo .item button {
    position: absolute;
}

JQUERY

$(document).ready(function() {
    $("#owl-demo").owlCarousel({

        navigation : false,
        autoPlay: 2200,
        slideSpeed : 300,
        paginationSpeed : 800,
        singleItem : true,
        pagination: true,
        stopOnHover: true,

    });
});

Answer 1

<强> http://jsfiddle.net/pv395/6/

.modal-open #owl-demo {width:100%!important;}
.modal-open #owl-demo .item {width:100%!important;}

这似乎可以解决问题。让我知道。我测试了它，并在最后一张幻灯片中等待它移动并停止移动。问题是，当您的模态处于打开状态时，您不再与滑块交互，因此在悬停时停止它并不是您所需要的。

你需要它停下来。这是一个有效的想法：

$(document).ready(function() {

     var owl = $("#owl-demo");

    $("#owl-demo").owlCarousel({
        navigation : false,
        autoPlay: 2200,
        slideSpeed : 300,
        paginationSpeed : 800,
        singleItem : true,
        pagination: true,
        stopOnHover: true,
    });

 $('#owl-demo .btn').click(function(){
        owl.trigger('owl.stop');
});


});

Answer 2

以下内容将解决此问题。首先我们必须在模态打开时停止旋转木马...然后在我们关闭模态后，我们跳到下一张幻灯片。这也适用于最后一项，因为它现在停止而不是返回到第一张幻灯片。感谢克里斯蒂娜停止旋转木马的想法。

$('#myModal').on('show.bs.modal', function () {
  owl.trigger('owl.stop');
});

$('#myModal').on('hidden.bs.modal', function () {
  owl.trigger('owl.next');

Answer 3

谢谢Alex。我认为模态关闭时的事件应改为：

$('#myModal').on('hidden.bs.modal', function () {
   owl.trigger('owl.play',2200);
});

注意：因为如果我们使用＆＃39; owl.next＆＃39; =＆GT;猫头鹰旋转木马将进入下一张幻灯片并停止。但是如果我们使用＆＃39; owl.next＆＃39;使用autoPlay设置= 2200所以它会像我们第一次运行它一样工作。

当打开模态时，猫头鹰旋转木马问题与最后一项

3 个答案: