Owl carousel breaks

Question

I have searched for a solution, but I haven't found a problem same as mine...

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

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.

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

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?

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

Thanks in advance for any help....

Answer 1

You can trigger the owl-carousel methods manually this way:

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

Other way would be to trigger window resize event (not recommended):

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

More about carousel events in docs.

Explanation about broken carousel:

The plugin has to know the container width and elements height in order to work. While the carousel is hidden, all of those values are zero. Therefore, after showing hidden carousel one need to trigger refresh and that way force owl-carousel to recalculate values.

In some cases, you can set the opacity of carousel to opacity: .001 during the carousel initialization, than hide it and set opacity back to 1. Visitors won't see it and the owl-carousel won't be broken.

EDIT

In your case, the final code would 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 the error in your code:

You init the carousel on .owl-carousel and on its container elements .slider. There should be only one, guess .owl-carousel.

EDIT 2

For owl-carousel version 1, you can re-init it this way:

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

reinit() method reinitialize plugin

Syntax: owldata.reinit(newOptions)

Yes! you can reinit plugin with new options. Old options will be overwritten if exist or added if new.

You can easly add new content by ajax or change old options with reinit method.

More about v1 content manipulations.