打开模式时最后一项的猫头鹰轮播问题答案

【问题标题】：Owl carousel issue with last item when open a modal打开模式时最后一项的猫头鹰轮播问题
【发布时间】：2014-07-18 09:00:24
【问题描述】：

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

You can see the replicated issue here in jsfiddle

猫头鹰旋转木马

<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>

引导标准模式

<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,

    });
});

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 owl-carousel

【解决方案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');
});


});

【讨论】：

【解决方案2】：

以下内容将解决此问题。首先，我们必须在模态打开时停止轮播……然后在关闭模态后，我们跳到下一张幻灯片。这也适用于最后一项，因为现在它停止而不是返回到第一张幻灯片。感谢 Christina 提出停止轮播的想法。

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

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

【讨论】：

【解决方案3】：

谢谢亚历克斯。我认为模态关闭时的事件应该更改为：

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

注意：因为如果我们使用 'owl.next' => Owl 轮播将转到下一张幻灯片并停止。但是，如果我们使用 'owl.next' 和 autoPlay 设置 = 2200，那么它会像我们第一次运行它一样工作。

【讨论】：