title: Slick Carousel how to go to a slide and give it focus based on href
body: <p>I have an issue with Slick Slider:</p>
  <ol>
  <li>Based on href set Current Slide</li>
  <li>Based on href set Focus</li>
  <li>Based on href set GotoSlide</li>
  <li>When dragging or click on arrow don't change the current slide status</li>
  </ol>
  <p>I have tried many methods to make it work, but they've all failed.</p>
  <p>Codepen: <a href="https://codepen.io/kelvinspaces/pen/JjXopVa" rel="nofollow noreferrer">https://codepen.io/kelvinspaces/pen/JjXopVa</a></p>
  <p>JS:</p>
  <pre><code>$(function () {
      $('#DailyLifeStyleTabs').slick(DailyLifeStyleTabs());
      GetActiveMenu('');
      function GetActiveMenu(path) {
          if (path != &quot;&quot;) {
              var pathName = path;
              return;
          }
          var pathName = $(location).attr('pathname');
          var tabindex = $('#DailyLifeStyleTabs .slick-slide div li a[href=&quot;' + pathName + '&quot;]').parents('.slick-slide').data(&quot;slick-index&quot;);
          $('#DailyLifeStyleTabs').slick(&quot;slickGoTo&quot;, tabindex);
          $('#DailyLifeStyleTabs .slick-slide').removeClass('slick-current');
          $('#DailyLifeStyleTabs .slick-slide div li a[href=&quot;' + pathName + '&quot;]').parents('.slick-slide').addClass('slick-current');
      }
  });
  </code></pre>
  <p>Slide Settings:</p>
  <pre><code>//Daily Tabs Settings
  function DailyLifeStyleTabs() {
      return {
          dots: false,
          slidesToShow: 7,
          slidesToScroll: 7,
          infinite: true,
          arrows: true,
          //focusOnChange: false
      }
  };
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;ul id=&quot;DailyLifeStyleTabs&quot; class=&quot;daily-lifestyle-tabs&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/NewMums&quot;&gt;New Mums&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/CreativeHobbies&quot;&gt;Creative Hobbies&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/JustHitTheBall&quot;&gt;Just Hit The Ball&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/CycleMania&quot;&gt;Cycle Mania&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/StayWarm&quot;&gt;Stay Warm&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/RestRelax&quot;&gt;Rest Relax&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/PetLover&quot;&gt;Pet Lover&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/HouseKeeping&quot;&gt;House Keeping&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/WaterSportsLover&quot;&gt;Water Sports Lover&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/HygieneMustHaves&quot;&gt;Hygiene Must Haves&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/ExtremeSports&quot;&gt;Extreme Sports&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/DailyLifeStyle/HighStreetFashion&quot;&gt;High Street Fashion&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>