title: Slick after refresing content with ajax it brakes
body: <p>I try to implement a simple carousel with slick, but the carousel items should be refreshed every few seconds via AJAX.</p>
  
  <p>The problem is that slick brakes after the content is refreshed. In addition in my console I don't get any error.</p>
  
  <p>So my HTML looks like that:</p>
  
  <pre><code>&lt;div class="live-carousel" data-slick="off"&gt;
      &lt;div class="score-container"&gt;
          &lt;div class="item"&gt;
              &lt;div class="score"&gt;
                  &lt;p&gt;
                      &lt;a href="#"&gt;Team A&lt;/a&gt; &lt;span&gt;0&lt;/span&gt;
                  &lt;/p&gt;
                  &lt;p&gt;
                      &lt;a href="#"&gt;Team B&lt;/a&gt; &lt;span&gt;2&lt;/span&gt;
                  &lt;/p&gt;
                  &lt;span class="has_info"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="info"&gt;
                  &lt;dl&gt;
                      &lt;dt&gt;&lt;a href="#"&gt;Team A&lt;/a&gt;&lt;/dt&gt;
                      &lt;dd&gt;Player name &lt;span&gt;12'&lt;/span&gt;&lt;/dd&gt;
                  &lt;/dl&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>By the AJAX request I create multiple <code>.score</code> items inside the <code>.score-container</code> and that's why I use the slick to make them displayed as carousel.</p>
  
  <p>My javascript code is like that:</p>
  
  <pre><code>var getLive = function() {
  
  var $score_flipping_cards = $( '#score_flipping_cards' );
  var $live_carousel = $('.live-carousel');
  var $slick = null;
  
  if ( 0 &lt; $score_flipping_cards.length ) {
      $.ajax(
          {
              url     : z.ajaxurl,
              type    : 'POST',
              data    : {
                  action : 'get_live'
              },
              success : function ( data, textStatus, jqXHR ) {
                  var $template = _.template( $score_flipping_cards.html() );
                  var $counter  = 0;
  
                  if ( null !== $slick ) {
                      $live_carousel.slick('unslick');
                  }
  
                  $live_carousel.empty();
  
                  var a = $.map(data, function(value, index) {
                                          return [value];
                  });
  
                  _.each(
                      a,
                      function( $match ) {
                          _.each(
                              $match,
                              function( $game ) {
                                  var $goals = [];
                                  var $template_data = {};
  
                                  ++$counter;
  
                                  $template_data.livePage = $game.livePageURL;
                                  $template_data.team_a = $game.TeamAName;
                                  $template_data.team_a_score = $game.TeamAScore;
  
                                  $live_carousel.append( $template( $template_data ) );
  
                                  if( $match.length === $counter ) {
                                          $slick = true;
                                          make_slick($live_carousel);
                                      }
                                  }
                              );
                          }
                      );
                  }
              }
          );
      }
  };
  
  getLive();
  
  setInterval(
      getLive,
      8000
  );
  </code></pre>
  
  <p>And my slick initiation function is like that:</p>
  
  <pre><code>var make_slick = function ($live_carousel) {
          $live_carousel.slick (
              {
                  accessibility : true,
                  autoplay : true,
                  cssEase : 'ease-in-out',
                  easing : 'ease-in-out',
                  lazyLoad : 'progressive',
                  infinite       : true,
                  slidesToShow   : 5,
                  slidesToScroll : 5,
                  dots           : true,
                  speed          : 300,
                  responsive     : [
                      {
                          breakpoint : 1024,
                          settings   : {
                              slidesToShow   : 5,
                              slidesToScroll : 5
                          }
                      },
                      {
                          breakpoint : 600,
                          settings   : {
                              slidesToShow   : 3,
                              slidesToScroll : 3
                          }
                      },
                      {
                          breakpoint : 480,
                          settings   : {
                          slidesToShow   : 1,
                          slidesToScroll : 1
                      }
                  }
              ]
          }
      );
  };
  </code></pre>
  
  <p>As you can see, if the carousel has been initiated I unslick the carousel, and I initiating the slick carousel again after the items has been append in my carousel container.</p>
  
  <p>the very first time the page is loading the carousel it is initiated normally, but after the second ajax call the carousel brakes.</p>
  
  <p>Can someone help with that ?</p>