title: initialize owl carousel on click function of tab
body: <p>I am using tab structure with owl slider and title but as the user wanted unique url of each tab clicked, I changed that into click function. Here, I am unable to process the slider.It just won't work.
  HTML:</p>
  
  <pre><code>&lt;ul id="myTab" class="nav nav-tabs"&gt;
     &lt;li class="active" id="chhimi-gurung"&gt;
        &lt;a href="#tab-0" data-toggle="tab" rel="chhimi-gurung"&gt;Chhimi Gurung&lt;/a&gt;
     &lt;/li&gt;
     &lt;li class="" id="subha-shrestha"&gt;
        &lt;a href="#tab-1" data-toggle="tab" rel="subha-shrestha"&gt;Subha Shrestha                        &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="myTabContent" class="tab-content" &gt;
      &lt;div class="tab-pane fade active in" id="tab-0"&gt;
          &lt;h3&gt;Chhimi Gurung&lt;/h3&gt;
          &lt;div class="owl-carousel team-image-slider" id="team-image-slider-0"&gt;
              &lt;img src="uploads/images/team/profile-4.jpg" alt="" /&gt;
              &lt;img src="uploads/images/team/profile-3.jpg" alt="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane fade" id="tab-1"&gt;
          &lt;h3&gt;Subha Shrestha&lt;/h3&gt;
              &lt;div class="owl-carousel team-image-slider" id="team-image-slider-1"&gt;
                  &lt;img src="uploads/images/team/profile-1.jpg" alt="" /&gt;
                  &lt;img src="uploads/images/team/profile-2.jpg" alt="" /&gt;
                  &lt;img src="uploads/images/team/profile-3.jpg" alt="" /&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>var $owl = $('.team-image-slider');
  $(document).on("click", "ul#myTab li a", function() {
      var slug = $(this).attr("rel");
      var current_url = url.substring(0,url.lastIndexOf("/"));
      var tabId = $(this).attr("href").split("-")[1];
      $owl.trigger('destroy.owl.carousel');
      $owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
      $("#team-image-slider-"+tabId).owlCarousel({
         autoplay: true,
         autoplayTimeout: 5000,
         items: 1,
         nav: true,
         smartSpeed: 500,
      });
      history.pushState(null, null,  current_url + '/' + slug);
  })
  </code></pre>
  
  <p>How am I to solve this? Any help/suggestions are welcome.</p>