フクロウカルーセルは、私が外にビューを浮遊している私のページの異なるセクションを、持っている...</p> <p>を、私は解決策で検索しましたが、私は私と同じ問題を発見していない

Question

を壊し、各セクションでは、ビューに浮かびますあなたがメニューリンクをクリックすると。

フクロウカルーセルは1つの余分なセクションです...今問題は、例えば私がホームセクションにいるときにウィンドウのサイズを変更することです。もし私がスライダセクションを浮かせると、フクロウカルーセルはすべて壊れてしまいます。私は再びウィンドウのサイズを変更すると、カルーセルが再ロードされ、すべてが正常に動作しますが、この余分なサイズ変更を行う場合に限ります。

$(".menu-btn").click(function(event) { 
 
    var target = $(this).attr('href'); 
 
    event.preventDefault(); 
 

 
    $(".sectionID").removeClass("active"); 
 
    $(target).addClass("active"); 
 

 

 
}); 
 

 
$("#owl-example").owlCarousel(); 
 

 
$(".slider").owlCarousel({ 
 
    navigation: true, 
 
    pagination: true, 
 
    slideSpeed: 1000, 
 
    paginationSpeed: 500, 
 
    paginationNumbers: true, 
 
    singleItem: true, 
 
    autoPlay: false, 
 
    autoHeight: false, 
 
    animateIn: 'slideIn', 
 
    animateOut: 'slideOut', 
 
    afterAction: syncPosition, 
 
    responsiveRefreshRate: 200, 
 
    booleanValue: false, 
 
    afterMove: afterAction 
 
});

.header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.active { 
 
    z-index: 2; 
 
} 
 
#menu-top { 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 1000; 
 
} 
 
.sectionID { 
 
    margin: 100px 0; 
 
} 
 
.sectionID:nth-child(odd) { 
 
    transform: translateX(-5000px); 
 
} 
 
.sectionID:nth-child(even) { 
 
    transform: translateX(5000px); 
 
} 
 
#section-wrapper { 
 
    position: relative; 
 
} 
 
.sectionID { 
 
    position: absolute; 
 
    top: 0; 
 
    transition: 1.5s; 
 
    padding-bottom: 0; 
 
    height: 100vh; 
 
    background-color: white; 
 
} 
 
.sectionID.active { 
 
    transform: translateX(0px); 
 
    width: 100%; 
 
    padding-bottom: 0; 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
 
<div class="header"> 
 
    <ul> 
 
    <li><a href="#1" class="menu-btn">Home</a> 
 
    </li> 
 
    <li><a href="#2" class="menu-btn">Slider</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<section id="1" class="sectionID active"> 
 
    <div class="screen1"> 
 
    <h1 style="text-allign:center;">Home</h1> 
 
    </div> 
 
</section> 
 

 
<section id="2" class="sectionID"> 
 
    <div class="slider"> 
 
    <div id="owl-example" class="owl-carousel"> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
    </div> 
 
    </div> 
 
</section>

私は私のセクションがどのように働くか、より良く理解するためのスニペットを追加しました。 カルーセルがリフレッシュされていないか、再度ロードされていないので、メニューボタンをクリックすると、フクロウカルーセルのリフレッシュが開始されるという解決策を見つけようとしました。何も動作しないようです...

古いjqueryとowl carousel 1を持つテンプレートを使用しましたが、ファイルを更新するにはあまりにも多くの作業が必要になります。私はちょうどupdatet jqueryとフクロウカルーセルの場合、ページが適切に動作するとは思わない。または私は間違っていますか？

私の質問に戻る：クリックでフクロウカルーセルをリフレッシュする可能性はありますか？任意の助けを事前に

おかげで....

Answer 1

は手動でこの方法をowl-carouselメソッドをトリガーすることができます

$("#owl-example").trigger("refresh.owl.carousel"); 

他の方法は、ウィンドウのサイズ変更イベント（推奨されません）をトリガするために次のようになります。

$(window).trigger("resize"); 

カルーセルイベントの詳細はdocsです。壊れたカルーセルについて

説明：

プラグインが動作するために、コンテナの幅と高さの要素を知っている必要があります。カルーセルは隠されていますが、それらの値はすべてゼロです。したがって、非表示カルーセルを表示した後に、refreshをトリガーし、その方法で値owl-carouselを強制的に再計算する必要があります。

カルーセルの初期化中にカルーセルの不透明度をopacity: .001に設定すると、それを非表示にして不透明度を1に戻すように設定することができます。訪問者はそれを見ず、owl-carouselは壊れません。あなたのケースでは

EDIT

、最終的なコードは次のようになります。

var owlContainer = $("#owl-example"); 
owlContainer.owlCarousel(); 
$(".menu-btn").click(function(event) { 
    event.preventDefault(); 
    var target = $($(this).attr('href')); 
    $(".sectionID").removeClass("active"); 
    target.addClass("active"); 
    target.find(".owl-carousel").trigger("refresh.owl.carousel"); 
}); 

あなたのコード内のエラーを注意してください。

あなたは.owl-carouselにカルーセルを初期化し、上そのコンテナ要素.slider。唯一のものがあるはずです、.owl-carouselと推測してください。 owl-carouselバージョンについては

EDIT 2

、あなたはこのようにそれを再初期化することができます

target.find(".owl-carousel").data('owlCarousel').reinit(); 

REINIT（）メソッドを再初期化プラグイン

構文：owldata .reinit（newOptions）

はい！新しいオプションでプラグインを再設定することができます。古いオプションは、存在する場合は上書きされ、新しい場合は上書きされます。 になります。

easitly新しいコンテンツをajaxで追加したり、古いオプションを reinitメソッドで変更することができます。

More about v1 content manipulations。