CodePen

HTML

            
              <ul id="slider">
  <li>
    <img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-1.jpg" data-thumb="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-1.jpg" alt="" />
  </li>
  <li>
    <img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-1.jpg" data-thumb="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-1.jpg" />
  </li>
  <li>
    <img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-2.jpg" data-thumb="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-2.jpg" />
  </li>
  <li>
    <img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-2.jpg" data-thumb="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-2.jpg" />
  </li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              ul#slider {
  width: 680px;
  height: 317px;
  list-style: none;
}
/*
  Adjust the left and right position to be about the same size as the
  outer wrapper padding (.anythingslider-metallic)
*/
.prev-thumb, .next-thumb {
  display: none;
  position: absolute;
  width: 140px;
  height: 70px;
  left: 25px; /* adjust this as needed */
  background: #0355a3;
  top: 50%;
  margin-top: -35px;
}
.next-thumb {
  left: auto;
  right: 25px; /* adjust this as needed */
}
.prev-thumb img, .next-thumb img {
  width: 100px;
  height: 60px;
  margin: 5px;
}
.prev-thumb img {
  float: right;
}
.back:hover ~ .prev-thumb, .forward:hover ~ .next-thumb, .prev-thumb:hover, .next-thumb:hover {
  display: inline;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function () {
  function updateThumbs(slider) {
    var prv = slider.targetPage - 1 < 0 ? slider.panels : slider.targetPage - 1,
    nxt = slider.targetPage + 1 > slider.panels - 1 ? 0 : slider.targetPage + 1;
    $('.prev-thumb img').attr('src', slider.$items.eq(prv).find('img').attr('data-thumb'));
    $('.next-thumb img').attr('src', slider.$items.eq(nxt).find('img').attr('data-thumb'));
  };

  /* use slide_complete instead of slide_begin if you want the thumbs to change
  after the animation has completed, but the updating then won't match the
  default navigation styling
  */
  $('#slider').on('initialized slide_begin', function(e, slider){
    if (!slider.$wrapper.find('.prev-thumb').length) {
      slider.$wrapper.append('<div class="prev-thumb"><img/></div><div class="next-thumb"><img/></div>');
    }
    updateThumbs(slider);
  });

  /* initialize the slider */
  $('#slider').anythingSlider({
    theme: 'metallic'
  });

});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................