jquery - Owl carousel breaks -

i have searched solution, haven't found problem same mine...

i have different sections on page, floating outside view, each section floats view if click on menu-link.

the owl carousel 1 section...the problem is, when on home-section example , resize window. if let the slider-section float view, owl-carousel broken. if resize window again, carousel reloaded , works fine, if resize.

$(".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>

i added snippet better understanding, how sections work. think because carousel not refreshed or loaded again, tried find solution, on click menu-buttons refresh of owl carousel started, don't know how. nothing seems work..

i used template, has older jquery , owl carousel 1, , work update files. don't think page work if updatet jquery , owl carousel. or wrong?

well, question: there possibility refresh owl carousel on click?

thanks in advance help....

you can trigger owl-carousel methods manually way:

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

other way trigger window resize event (not recommended):

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

more carousel events in docs.

explanation broken carousel:

the plugin has know container width , elements height in order work. while carousel hidden, of values zero. therefore, after showing hidden carousel 1 need trigger refresh , way force owl-carousel recalculate values.

in cases, can set opacity of carousel opacity: .001 during carousel initialization, hide , set opacity 1. visitors won't see , owl-carousel won't broken.

edit

in case, final code be:

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

please note error in code:

you init carousel on .owl-carousel , on container elements .slider. there should one, guess .owl-carousel.

edit 2

for owl-carousel version 1, can re-init way:

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

reinit() method reinitialize plugin

syntax: owldata.reinit(newoptions)

yes! can reinit plugin new options. old options overwritten if exist or added if new.

you can easly add new content ajax or change old options reinit method.

more v1 content manipulations.