title: How can I make my Slick slider less jerky and work at all widths?
body: <p>I've been working on a cards slider using Slick Carousel (<a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a>). I want it to loop infinitely and work at varying browser widths without the cards stacking, it's not quite there at the moment. At the moment it's jerky on the loop (after 5 slides).</p>
  
  <p>If anyone could help me that would be great, I've got a demo up on CodePen!
  <a href="https://codepen.io/cbg/pen/YQdqPQ" rel="nofollow noreferrer">https://codepen.io/cbg/pen/YQdqPQ</a></p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
  
      &lt;style type="text/css"&gt;
  
          body {
              margin: 0;
          }
  
          #slider {
              background-color: #f5f7f9;
              padding: 80px;
              overflow: auto;
          }
  
          .service {
              width: 260px !important;
              height: 303px;
              background-color: white;
              float: left;
              margin: 0 15px;
              box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15);
              border-radius: 4px;
          }
  
          .slick-arrow {
              display: none !important;
          }
  
          .pod1 {
              background-image: url(fakepods/pod1.png);
          }
  
          .pod2 {
              background-image: url(fakepods/pod2.png);
          }
  
          .pod3 {
              background-image: url(fakepods/pod3.png);
          }
  
          .pod4 {
              background-image: url(fakepods/pod4.png);
          }
  
          .pod5 {
              background-image: url(fakepods/pod5.png);
          }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="slider" class="center slider"&gt;
          &lt;div class="pod1 service"&gt;&lt;/div&gt;
          &lt;div class="pod2 service"&gt;&lt;/div&gt;
          &lt;div class="pod3 service"&gt;&lt;/div&gt;
          &lt;div class="pod4 service"&gt;&lt;/div&gt;
          &lt;div class="pod5 service"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="slick.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).on('ready', function() {
  
      $(".center").slick({
      dots: false,
      infinite: true,
      centerMode: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 250,
      });
  
  
      });
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>