A CodePen by schadeck. Custom Navigation for SlidesJS - Custom navigation example for SlidesJS 3.0. This will hide the default navigation and emulate the click events through the custom markup.

index.html

<div class="container">
    <div id="slides">
      <div>
        <img src="http://placehold.it/600x300/c66/fff&text=[slide+1]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/6c6/fff&text=[slide+2]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/36a/fff&text=[slide+3]" width="100%" alt=""/>
      </div>
      <div>
        <img src="http://placehold.it/600x300/666/fff&text=[slide+4]" width="100%" alt=""/>
      </div>
    </div>
    <ul class="custom-navigation">
        <li><a class="custom-prev" href="#" title="Previous">prev</a></li>
        <li><a class="custom-next" href="#" title="Next">next</a></li>
        <li><a href="#" class="custom-item" data-item="0">1</a></li>
        <li><a href="#" class="custom-item" data-item="1">2</a></li>
        <li><a href="#" class="custom-item" data-item="2">3</a></li>
        <li><a href="#" class="custom-item" data-item="3">4</a></li>
    </ul>
</div>

script.js

$('#slides').slidesjs({
    width: 600,
    height: 300,
    callback: {
        loaded: function(){
          // hide navigation and pagination
          $('.slidesjs-pagination, .slidesjs-navigation').hide(0); 
        }
    }
});
  
  // custom navigation/pagination links for slideshow
$(".custom-item").click(function(e){
  e.preventDefault();
  // use data-item value when triggering default pagination link
  $('a[data-slidesjs-item="' + $(this).attr("data-item") + '"]').trigger('click');
});
$('.custom-next').click(function(e) {
  e.preventDefault();
  // emulate next click
  $('.slidesjs-next').click();
});
$('.custom-prev').click(function(e) {
  e.preventDefault();
  // emulate previous click
  $('.slidesjs-previous').click();
});
  

style.css

/* style custom navigation */
ul { padding: 0; margin: 0; }
li { list-style: none; float: left; margin-right: .25em; font-family: monospace; }
li a { display: block; background: #399; padding: .25em 1em; color: #fff; text-decoration: none; border-radius: 0 0 .25em .25em; }

/* style slideshow */
#slides { display: none }
.container { margin: 0 auto; width: 600px; }

@media (max-width: 600px) {
.container { width: auto }
}