title: Jquery JSON plugin colliding with slick carousel
body: <p>I am relatively new to jquery but i need that script to start working properly.</p>
  
  <p>I have an jquery script for reading JSON data from url. It is working by itself but when i try to load data inside slick carousel, carousel stops working. I think that the problem is inside my script. Please help! </p>
  
  <p>My code:</p>
  
  <pre><code>(function($){ 
  $.fn.scores = function() {
      liveScores();
  };
  
  function liveScores() {
      setTimeout(liveScores, 5000);
  
      var jsonData = "http://url";
  
      $.getJSON(jsonData, function(rawJsonData){
  
          var complete =[];
  
          //var realcatCount = rawJsonData.doc[0].data[0].realcategories.length;
  
          for (realCat = 0; realCat &lt;= 3; realCat ++) {
  
              console.log(realCat);
  
              var basePath = rawJsonData.doc[0].data[0].realcategories[realCat]
  
              var tournament = basePath.tournaments[0].name;
              var name = basePath.name;
              var matchStatus = basePath.tournaments[0].matches[0].status._id;
              var homeTeam = basePath.tournaments[0].matches[0].teams.home.name;
              var awayTeam = basePath.tournaments[0].matches[0].teams.away.name;
              var time = basePath.tournaments[0].matches[0]._dt.time;
              var date = basePath.tournaments[0].matches[0]._dt.date;
              var homeScore = basePath.tournaments[0].matches[0].result.home;
              var awayScore = basePath.tournaments[0].matches[0].result.away;
              var teamIdHome = basePath.tournaments[0].matches[0].teams.home.uid;
              var teamIdHAway = basePath.tournaments[0].matches[0].teams.away.uid;
  
  
              complete.push('&lt;div class="slide-wrapper"&gt;&lt;h2&gt;'+tournament+'&lt;/h2&gt;&lt;h4&gt;'+name+'&lt;/h4&gt;&lt;div class="score"&gt;'+homeScore+ ' vs. '+awayScore+'&lt;/div&gt;&lt;div class="team home-team"&gt;&lt;div class="crest crest-home" style="background:url(http://ls.betradar.com/ls/crest/big/'+teamIdHome+'.png) no-repeat center center;"&gt;&lt;/div&gt;&lt;h3&gt;'+homeTeam+'&lt;/h3&gt;&lt;/div&gt;&lt;div class="team away-team"&gt;&lt;div class="crest crest-away" style="background:url(http://ls.betradar.com/ls/crest/big/'+teamIdHAway+'.png) no-repeat center center;"&gt;&lt;/div&gt;&lt;h3&gt;'+awayTeam+'&lt;/h3&gt;&lt;/div&gt;&lt;div class="overlay"&gt;&lt;/div&gt;&lt;img class="bcg" src="images/bg-live.jpg"&gt;&lt;/div&gt;');
  
          }
  
          console.log(complete);
  
          $('#results').empty().append(complete);
  
      });
  };
  </code></pre>
  
  <p>})(jQuery);</p>
  
  <p>This is the order i load scripts and plugins at the bottom of the page.</p>
  
  <pre><code>    &lt;script type="text/javascript" src="js/scores.js"&gt;&lt;/script&gt;
      &lt;script&gt;        
          $(document).ready(function() {
              $().scores();
           });
      &lt;/script&gt;
  
      &lt;script type="text/javascript" src="js/slick.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              $('.slider').slick({
                  dots: true,
                  arrows: false,
                  infinite: true,
                  speed: 300,
                  slidesToShow: 1,
                  adaptiveHeight: true,
                  fade: true,
                  cssEase: 'linear'
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>First i load carousels item (JSON data) and then the slick carousel itself.</p>
  
  <p>And the slick carousel works just fine until i put data from my plugin into it.</p>