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

Jクエリ

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

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

    });
});
4

3 に答える 3

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

次のことはこれを修正します。最初に、モーダルが開いたときにカルーセルを停止する必要があります...次に、モーダルを閉じた後、次のスライドにジャンプします。これは、最初のスライドに戻る代わりに停止するため、最後の項目でも機能します。カルーセルを停止するというアイデアをくれた Christina に感謝します。

$('#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 に答える