I use the slick.js slider often. It’s small, easy to use and very customizable. I’ve been asked a few times how to control the slick slider with custom anchor links like on the homepage of this site so here’s how to do that.

All you have to do is turn the sliders off with arrows: false. Then, attach your new links using the SlickGoTo method.

HTML

<div class="slider">
  <div>
    <p>Blog</p>
  </div>
    <div>
      <p>Work</p>
  </div>
    <div>
      <p>Contact</p>
  </div>
</div>

<nav>
  <ul>
    <li class="slide-0"><a href="javascript:void(0)">Blog</a></li>
      <li class="slide-1"><a href="javascript:void(0)">Work</a></li>
      <li class="slide-2"><a href="javascript:void(0)">Contact</a></li>
  </ul>
</nav>

Javascript

$('.slider').slick({
  arrows: false
})

$('nav ul li').each(function(i) {
  $('nav .slide-' + i + ' a').click(function(){
    $('.slider').slickGoTo(i);
  })
})

View on CodePen

You can use any element you want with those methods. If you want to use custom arrows somewhere in your interface you can instead use slickPrev() and slickNext() in the same way.