title: How to make Slick swipeToSlide vertically?
body: <p>I'm trying to make a navigation vertical carousel compatible with IE11 i'm using <a href="https://github.com/kenwheeler/slick" rel="nofollow noreferrer">slick library</a> for the carousel, i'm having some issues with swipeToSlide option which should allow me to slide to selected slide by swipe but instead it just swipe one slider by one:</p>
  <p><a href="https://i.stack.imgur.com/EMOFW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EMOFW.gif" alt="enter image description here" /></a></p>
  <p>Like in the image i would scroll to slide 5 but instead it  just scroll to the next slide.</p>
  <p>Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        $(".slider").slick({
              centerMode: true,
              centerPadding: '60px',
              slidesToShow: 3,
              vertical: true,
              verticalSwiping: true,
              arrows: false,
              swipeToSlide: true,
              focusOnSelect: true,
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        body {
              background: #3498db;
          }
  
          .menu h3 {
              background: #fff;
              color: #3498db;
              font-size: 36px;
              line-height: 100px;
              margin: 10px;
              padding: 2%;
              position: relative;
              text-align: center;
          }
  
          .menu h3 {
              opacity: 0.8;
              transition: all 300ms ease;
          }
  
          .slick-center h3 {
              -moz-transform: scale(1.08);
              -ms-transform: scale(1.08);
              -o-transform: scale(1.08);
              -webkit-transform: scale(1.08);
              color: #e67e22;
              opacity: 1;
              transform: scale(1.08);
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"&gt;&lt;/script&gt;
      &lt;div class="slider"&gt;
          &lt;div class="menu"&gt;
              &lt;h3&gt;Menu 1&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="menu"&gt;
              &lt;h3&gt;Menu 2&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="menu"&gt;
              &lt;h3&gt;Menu 3&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="menu"&gt;
              &lt;h3&gt;Menu 4&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="menu"&gt;
              &lt;h3&gt;Menu 5&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>