title: Owl Carousel: Cannot read property 'visibleItems' of undefined
body: <p>I'm not sure if this is a problem, but I get this error in my Console, and it drives me crazy 'cause I prefer to have to errors on my pages.</p>
  
  <p><b>Uncaught TypeError: Cannot read property 'visibleItems' of undefined</b>.
  It points to this line of code:
  <code>var sync2visible = sync2.data("owlCarousel").owl.visibleItems;</code></p>
  
  <p>I created a JSFiddle to replicate this: <a href="http://jsfiddle.net/j2esf0bn/3/" rel="nofollow">http://jsfiddle.net/j2esf0bn/3/</a></p>
  
  <pre><code>&lt;div id="main_image"&gt;
      &lt;div id="sync1" class="owl-carousel owl-theme"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="product_thumbnails"&gt;
      &lt;div id="sync2" class="owl-carousel owl-theme"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  jQuery(document).ready(function () {
  
      var sync1 = jQuery("#sync1");
      var sync2 = jQuery("#sync2");
  
      sync1.owlCarousel({
          jsonPath: 'https://dl.dropboxusercontent.com/u/71195383/customData.json',
          jsonSuccess: customDataSuccess1,
          singleItem: true,
          slideSpeed: 1000,
          pagination: true,
          navigation: true,
          navigationText: ["&lt;i class='fa fa-chevron-left fa-2x'&gt;&lt;/i&gt;", "&lt;i class='fa fa-chevron-right fa-2x'&gt;&lt;/i&gt;"],
          afterAction: syncPosition,
          responsiveRefreshRate: 200,
          rewindNav: false,
          lazyLoad: true
      });
  
      sync2.owlCarousel({
          jsonPath: 'https://dl.dropboxusercontent.com/u/71195383/customData.json',
          jsonSuccess: customDataSuccess2,
          items: 5,
          itemsDesktop: [1199, 5],
          itemsDesktopSmall: [979, 5],
          itemsTablet: [768, 5],
          itemsMobile: [479, 4],
          navigation: true,
          navigationText: ["&lt;i class='fa fa-chevron-left fa-2x'&gt;&lt;/i&gt;", "&lt;i class='fa fa-chevron-right fa-2x'&gt;&lt;/i&gt;"],
          pagination: false,
          rewindNav: false,
          slideSpeed: 1000,
          responsiveRefreshRate: 100,
          afterInit: function (el) {
              el.find(".owl-item").eq(0).addClass("synced");
          }
  
      });
  
      function syncPosition(el) {
          var current = this.currentItem;
          jQuery("#sync2")
              .find(".owl-item")
              .removeClass("synced")
              .eq(current)
              .addClass("synced");
          if (jQuery("#sync2").data("owlCarousel") !== undefined) {
              center(current);
          }
  
      }
  
      jQuery("#sync2").on("click", ".owl-item", function (e) {
          e.preventDefault();
          var number = jQuery(this).data("owlItem");
          sync1.trigger("owl.goTo", number);
      });
  
      function center(number) {
          var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
  
          var num = number;
          var found = false;
          for (var i in sync2visible) {
              if (num === sync2visible[i]) {
                  var found = true;
              }
          }
  
          if (found === false) {
              if (num &gt; sync2visible[sync2visible.length - 1]) {
                  sync2.trigger("owl.goTo", num - sync2visible.length + 2);
              } else {
                  if (num - 1 === -1) {
                      num = 0;
                  }
                  sync2.trigger("owl.goTo", num);
              }
          } else if (num === sync2visible[sync2visible.length - 1]) {
              sync2.trigger("owl.goTo", sync2visible[1]);
          } else if (num === sync2visible[0]) {
              sync2.trigger("owl.goTo", num - 1);
          }
      }
  
  
      function customDataSuccess1(data) {
          var content = "";
          for (var i in data["items"]) {
  
              var img = data["items"][i].img;
              var alt = data["items"][i].alt;
  
              content += "&lt;img class=\"lazyOwl\"  data-src=\"http://owlgraphic.com/owlcarousel/demos/" + img + "\" alt=\"" + alt + "\"&gt;";
          }
          jQuery("#sync1").html(content);
      }
  
      function customDataSuccess2(data) {
          var content = "";
  
          for (var i in data["items"]) {
  
              var img = data["items"][i].img;
              var alt = data["items"][i].alt;
  
              if (data["thumbnails"] === true) {
                  img = img.replace(".jpg", '-th.jpg');
              }
  
              content += "&lt;img src=\"http://owlgraphic.com/owlcarousel/demos/" + img + "\" alt=\"" + alt + "\"&gt;";
          }
          jQuery("#sync2").html(content);
      }
  
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm not sure how to interpret or fix this error.  I've searched the net, but couldn't find anything that answers my question.</p>
  
  <p>Any help appreciated!</p>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>All attempts at trying to resolve this error has lead to other errors.</p>
  
  <p>The error only appears in the console once when the page is loaded.  After the page load, the carousel operates as expected.</p>
  
  <p>So, in conclusion, I will not let this error upset me further, and simply try to ignore it when viewing the console log on this specific page.  <strong>However</strong>, if anyone has found a way to fix this error, please do not hesitate to post your answer.</p>
  
  <p>It appears that the error is related to using <strong><em>JSON along with synced carousels</em></strong>.</p>