Owl carousel 2 does not work with tabs - how to fix it?

Question

JavaScript

There are 2 owl carousel 2 , each in its own tab.
In the first tab, the slider works properly, but as soon as I switch to the second tab, the slider is displayed incorrectly: everything is crammed together.
As I understand it, this occurs due to the fact that the first tab is hidden.
In the first version of owl carousel, they say that this problem does not arise, but I need the second one because of some features.

I'm trying to attach a reload of OWL-carousel trigger('refresh.owl.carousel') to the tab switching event , but I'm doing something wrong, because no effect is observed ..

How to fix it? fiddle

$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  });

  $("#owl-demo2").owlCarousel({
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  });
  $(".nav-tabs>li.active").click(function() {
    $(".owl-carousel").trigger('refresh.owl.carousel');
  });
});

<div class="tabbable">
  <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
    </li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
      <div id="owl-demo" class="owl-carousel">
        <div class="item">
          <h1>1</h1>
        </div>
        <div class="item">
          <h1>2</h1>
        </div>
        <div class="item">
          <h1>3</h1>
        </div>
        <div class="item">
          <h1>4</h1>
        </div>
        <div class="item">
          <h1>5</h1>
        </div>
        <div class="item">
          <h1>6</h1>
        </div>

      </div>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
      <div id="owl-demo2" class="owl-carousel">
        <div class="item">
          <h1>1</h1>
        </div>
        <div class="item">
          <h1>2</h1>
        </div>
        <div class="item">
          <h1>3</h1>
        </div>
        <div class="item">
          <h1>4</h1>
        </div>
        <div class="item">
          <h1>5</h1>
        </div>
        <div class="item">
          <h1>6</h1>
        </div>

      </div>
    </div>
  </div>
</div>

Answer 1

trigger on completed event

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
.....
})

Answer 2

Implemented here. sanbel.info Look.