Owl carousel breaks
<p>I have searched for a solution, but I haven't found a problem same as mine...</p>

<p>I have different sections on my page, which are floating outside view, each section floats into view if you click on the menu-link.</p>

<p>The owl carousel is one extra section...The problem now is, that when I am on the home-section for example and I resize the window. If I then let the the slider-section float into view, the owl-carousel is all broken. If I then resize the window again, the carousel is reloaded and everything works fine, but only if I do this extra resize.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".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
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="header"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#1" class="menu-btn"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#2" class="menu-btn"&gt;Slider&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;section id="1" class="sectionID active"&gt;
  &lt;div class="screen1"&gt;
    &lt;h1 style="text-allign:center;"&gt;Home&lt;/h1&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;section id="2" class="sectionID"&gt;
  &lt;div class="slider"&gt;
    &lt;div id="owl-example" class="owl-carousel"&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>I added a snippet for better understanding, how my sections work.
I think it is because the carousel is not refreshed or loaded again, so I tried to find a solution, that on click the menu-buttons the refresh of the owl carousel is started, but I don't know how. Nothing seems to work..</p>

<p>I used a template, which has an older jquery and the owl carousel 1, and now it would be too much work to update the files. I don't think the page would work properly if I just updatet jquery and the owl carousel. Or am I wrong?</p>

<p>Well, back to my question: Is there a possibility to refresh owl carousel on click?</p>

<p>Thanks in advance for any help....</p>