title: Select a Slick slider 1.3.5 after page load so it has focus to navigate with arrow keys
body: <p>I want the slider to be selected automatically after the loading of page. Meaning that I want to be able to navigate through the slider using the arrow keys right after the page load, without clicking on it first.</p>
  <p>This is the workign slider but I have to click on it first before the arrow keys work.</p>
  <p><a href="https://codepen.io/jinzagon/pen/YzqpdLj" rel="nofollow noreferrer">https://codepen.io/jinzagon/pen/YzqpdLj</a></p>
  <p>HTML</p>
  <pre><code>&lt;section class=&quot;top_slider&quot;&gt;
      &lt;div&gt;
          &lt;img src=&quot;http://placehold.it/288x288?text=1&quot;&gt;
      &lt;/div&gt;
      &lt;div&gt;
                     &lt;img src=&quot;http://placehold.it/288x288?text=1&quot;&gt;
      &lt;/div&gt;
      &lt;div&gt;
                    &lt;img src=&quot;http://placehold.it/288x288?text=1&quot;&gt;
      &lt;/div&gt;
      &lt;div&gt;
                   &lt;img src=&quot;http://placehold.it/288x288?text=1&quot;&gt;
      &lt;/div&gt;
      &lt;div&gt;
                 &lt;img src=&quot;http://placehold.it/288x288?text=1&quot;&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.slider {
    background-color: white;
    margin: 100px auto;
    height: auto!important;
  }
  
  .slick-slide {
    margin: 0px 20px;
  }
  
  .slick-slide img {
    width: 100%;
  }
  </code></pre>
  <p>JS</p>
  <pre><code>$(&quot;.top_slider&quot;).slick({
      dots: true,
      infinite: true,
      centerMode: true,
      slidesToShow: 3,
      slidesToScroll: 1,
  });
  </code></pre>