title: Slick.js: Slick slider not dragging properly (snapping back to first slide)
body: <p><strong>The Problem</strong></p>
  
  <p>I'm setting up a slick slider/carousel on a Wordpress website. Everything works/displays perfectly, however the slider has stopped dragging correctly.</p>
  
  <p>I can still physically drag the slider with the mouse and it animates as it should, however when I let go of the slider it just snaps back to the first slide and never lets me navigate back or forward from the first slide by dragging</p>
  
  <p>Using the prev and next arrows works perfectly, and so does using the arrow keys on the keyboard which makes me even more confused as to why the dragging doesn't work.</p>
  
  <p><strong>What I need</strong></p>
  
  <p>A fix for the dragging not working so that I can navigate through the slider properly.</p>
  
  <p>**The slider is also broken in the same way on mobile when I swipe through the slider.</p>
  
  <p><strong>My Code</strong></p>
  
  <p>I can't link you to the slider as it's on a private site at the moment, but I will try to put all of the code I think is relevant below:</p>
  
  <p>(I'm using the slick.min.js file and the slick.css file only from the download)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;div class="slider__item"&gt;
          &lt;a href=""&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li>There are multiple slider__item's but they are created in a WP Loop of the posts so I have only included one</li>
  <li>Leaving out content in slides so that this post isn't too long but imagine <code>&lt;p&gt;</code> and <code>&lt;div&gt;</code> tags for text/titles/images etc...</li>
  </ul>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.slider').slick({
      infinite: true,
      slidesToScroll: 1,
      variableWidth: true,
      dots: false,
      arrows: true,
      focusOnSelect: false,
      prevArrow: $('.home-posts__arrow__prev'),
      nextArrow: $('.home-posts__arrow__next'),
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.slider {
      position: absolute;
      left: calc(33.333333% + 30px);
  }
  
  .slider__item {
      max-width: 290px;
      margin: 0px 15px;
  }
  </code></pre>
  
  <p><strong>Reference image</strong></p>
  
  <p>The slider is to the right of the content, "Test post 4" is the first slide that it always snaps back to. The blue squares are temp prev and next buttons</p>
  
  <p><a href="https://i.stack.imgur.com/vC6QC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vC6QC.png" alt="enter image description here"></a></p>
  
  <p>I hope that's enough info to go off but leave a comment if you need anything else, thanks in advance!</p>