Jquery Thumbnail Scroller PLUGIN

Kendi ihtiyaçlarımdan dolayı ve jquery de bir eklenti geliştireyim acaba nasıl bişey diye merak ettiğim için bir eklenti geliştirdim.

bir resim galerisindeki küçük resimleri gösteren oraya scrool efekti veren gayet hoş bir eklenti oldu

Demo LINK

Gİthub 

Download

#Initialization
##Initialize via javascript

jQuery(document).ready(function() {
        $('#unique-pager').StncThumbnailScroller({
            scrollSpeed : 100,
            fadeSpeed : 400,
            imagePictureAttr : '#showPicture'
        });
    });

##Initialize via HTML

    <div id="unique-pager">
      <ul>
        <!-- your content -->
          </ul>
        </div>

##picture show

   <img src="" alt="" id="showPicture">

##arrows

    <div data-direction="next" class="btn directionBtn">
      <i class="fa fa-arrow-up"></i>
    </div>

        <div data-direction="prev" class="btn directionBtn">
      <i class="fa fa-arrow-down"></i>
    </div>

cssfile

    .pictureShow{
    width: 399px;
    border: 1px solid #ebebeb;
    float: left;
    height: 505px;
    margin: 0 20px 10px 0;
    overflow: hidden;
}

#thumbnailsGallery {
    margin: 0;
    width: 592px;
}
#unique-pager ul li img {

    border: 1px solid #dddddd;
    padding: 5px;
    margin: 5px;
    width: 130px;
    height: 130px;
    background: #f0f0f0;
}
#unique-pager {
    border: 1px solid red;
    width: 154px;
    height: 458px;
    overflow: hidden;
    font-size: 0;
    float:left;
}
.btn{
    width: 128px;
    height: 20px;
    line-height: 20px;
    padding: 14px;
    float: left;
    text-align: center;
    background-color: #000;
    color: #fff;
    cursor: pointer;
}
img {
    max-width: 100%;
    width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}