#thumbslider

Live preview --> aqui.

Primeiramente, cole esse código antes de </body>.

<script type="text/javascript" src="http://static.tumblr.com/qbzesex/4THmc7s14/01.js"></script> <script type="text/javascript" src="http://static.tumblr.com/qbzesex/gTpmc7s1f/02.js"></script> <script type="text/javascript" src="http://static.tumblr.com/qbzesex/dH0mc7s16/03.js"></script> <script type="text/javascript" src="http://static.tumblr.com/qbzesex/rBamc7rxy/04.js"></script>

Agora cole esse código entre <style> e </style> e personalize como quiser.

/** THUMB SLIDER **/ .container {background: #363e69; padding: 5px; width: 160px; box-shadow: 0 0 1em #101010;} .full-view .thumbs-wrapper {margin: 5px 5px 5px 20px; float: right; -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2);} .thumbs-wrapper {overflow: hidden; position: relative;} .thumbs img {float: left;} .thumbs-nav span {position: absolute; width: 22px; height: 40px; background: transparent url('http://tympanus.net/Development/FullscreenGridPortfolioTemplate/images/nav.png') no-repeat top left; top: 50%; left: 5px; margin-top: -20px; text-indent: -9000px; display: none;} .thumbs-nav span.thumbs-nav-next {left: auto; right: 5px; background-position: top right;} .thumbs-nav span.thumbs-nav-prev:hover {background-position: bottom left;} .thumbs-nav span.thumbs-nav-next:hover {background-position: bottom right;}

Agora cole isso aonde quiser que apareça.

<div class="container"> <div class="item block" data-bgimage=""> <div class="thumbs-wrapper"><div class="thumbs"> <img src="IMAGEM"> <img src="IMAGEM"> <img src="IMAGEM"> </div></div></div></div>

ps: A setinha do slide é do tympanus.

ps²: Todas as imagens devem ter o mesmo tamanho.