web-dev-qa-db-ja.com

フクロウカルーセルアイテムを再レンダリングする方法は？

さて、今は 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();ステートメントを使用して初期化すると、非表示状態ではサイズが初期化されません。

そのため、そのコントロールを表示すると、コントロールが混乱して表示されます！

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

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

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

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

助けてください。

jqueryhtmlcssowl-carouselowl-carousel-2
10
Alfred Huang

い汚い解決策を見つけました。とにかく、それは働いた：

主な手順：

  1. そのフクロウカルーセルを破壊します。
  2. マークアップを初期状態に手動で変更します。
  3. フクロウカルーセルを初期化します。
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.
});

うまくいきましたが、とても汚い方法で。より良い、きちんとした解決策を期待しています。

36
Alfred Huang

これは私のために働く：

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

13
mstuercke

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

これは、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
        }
5
Cuddlehead

Owl Carousel 2を使用すると、次のように再初期化できます。

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

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

3
ummdorian

2.0.0-beta.2.4に関しては、これは私のために機能します：

var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
    $owl.data('owlCarousel').onThrottledResize();
}
3
Ruslan Belziuk

フクロウのカルーセルにはカルーセルを更新するときに更新メソッドがあるため、使用しているプラ​​グインのドキュメントを読んでください。

refresh.owl.carousel

Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]

の ドキュメントはこちら イベント用

1
atmd