11

さて、私は今owl-carousel-2プラグインを使用しています。

そして、次の問題が発生します。

マークアップ コード:

<div class="owl-carousel" style="display: none;">
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <!-- ... -->
    <div class="item"><img src="..." /></div>
</div>

<script>
$(function() {
    var $owl = $('.owl-carousel');
    $owl.owlCarousel();

    // Doing many things here.

    $owl.show();
});
</script>

問題は：

$owl.owlCarousel();非表示状態のステートメントで初期化すると、そのサイズは初期化されません。

そのため、そのコントロールを表示すると、コントロールが乱雑に表示されます。

しかし、ウィンドウのサイズを変更すると、再レンダリングがトリガーされているように見えました。コントロールはコンテンツをレンダリングし、適切に表示します。

それで、この再レンダリング（またはリフレッシュ）メソッドをトリガーする方法があるかどうか疑問に思っています。

コントロールが乱雑に表示されないようにするため。

ドキュメントとソースを読み込もうとしましたが、まだ良い解決策がありません。

助けてください。

4

7 に答える 7

42

私は醜い、汚い解決策を見つけました。とにかく、うまくいきました：

主な手順:

  1. そのフクロウのカルーセルを破壊します。
  2. マークアップを手動で初期状態に変更します。
  3. owl-carousel を初期化します。
var $owl = $('.owl-carousel');
$owl.trigger('destroy.owl.carousel');
// After destory, the markup is still not the same with the initial.
// The differences are:
//   1. The initial content was wrapped by a 'div.owl-stage-outer';
//   2. The '.owl-carousel' itself has an '.owl-loaded' class attached;
//   We have to remove that before the new initialization.
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$owl.owlCarousel({
    // your initial option here, again.
});

それはうまくいきましたが、とても汚い方法でした。より良い、きちんとした解決策が見られることを願っています。

于 2015-01-16T02:52:11.817 に答える
15

これは私のために働く：

// get owl element
var owl = $('.owl-carousel');

// get owl instance from element
var owlInstance = owl.data('owlCarousel');

// if instance is existing
if(owlInstance != null)
    owlInstance.reinit();

詳細: http://owlgraphic.com/owlcarousel/demos/manipulations.html

于 2016-01-27T08:39:47.570 に答える
6

OPで同じ問題に遭遇しました。owl-loaded最初にクラスを削除することで、なんとか機能させることができました。次に、レンダリング時に、クラスを再度追加した後に更新イベントをトリガーします。

// Remove the owl-loaded class after initialisation 
$owl.owlCarousel().removeClass('owl-loaded');

// Show the carousel and trigger refresh
$owl.show(function() {
  $(this).addClass('owl-loaded').trigger('refresh.owl.carousel');
})
于 2015-07-09T05:01:13.170 に答える
6

これは、fish_ball の巧妙な回避策に基づく私のソリューションです。

if($('.owl-carousel').hasClass('owl-theme')){ //resize event was triggering an error, this if statement is to go around it

            $('.owl-carousel').trigger('destroy.owl.carousel'); //these 3 lines kill the owl, and returns the markup to the initial state
            $('.owl-carousel').find('.owl-stage-outer').children().unwrap();
            $('.owl-carousel').removeClass("owl-center owl-loaded owl-text-select-on");

            $(".owl-carousel").owlCarousel(); //re-initialise the owl
        }
于 2016-06-16T14:40:11.007 に答える
3

2.0.0-beta.2.4に関しては、これは私にとってはうまくいきます:

var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
    $owl.data('owlCarousel').onThrottledResize();
}
于 2016-09-20T08:06:19.947 に答える
3

Owl Carousel 2 では、次のように再初期化します。

jQuery('.owl-carousel').trigger('refresh.owl.carousel');

この問題を参照してください。

于 2017-08-02T18:17:52.247 に答える