3

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

您可以在 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;
}

查询

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

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

    });
});
4

3 回答 3

0

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

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

$('#myModal').on('hidden.bs.modal', function () {
  owl.trigger('owl.next');
于 2014-07-19T08:12:22.083 回答
0

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');
});


});
于 2014-07-18T23:47:25.377 回答
0

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

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

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

于 2014-09-17T09:42:07.573 回答