A Responsive Thumbnail Slider

responsive-thumbnail-slider

window.resizetimeout = false;

 function thumbnailSlider(){

    var numOfThumbs = jQuery("#ul-moreviews").children("li").length,
        sliderPosition = 0,
        productBoxWidth = parseInt(jQuery(".product-info-box").width()),
        listWidth = jQuery(".more-views #ul-moreviews li").css("width", productBoxWidth / 3 - 16 ),
        moreViewsWidth = parseInt(jQuery("#ul-moreviews li").outerWidth(true) * 3),
        thumbSliderWidth = parseInt(jQuery("#ul-moreviews li").outerWidth(true) * numOfThumbs + 20),
        thumbnailNav = jQuery(".more-views #more-views-nav"),
        thumbnailContainer = jQuery(".more-views #ul-moreviews"),
        sliderResetValue = thumbSliderWidth - moreViewsWidth;
        jQuery(".more-views #ul-moreviews").css("marginLeft", "0px");
        jQuery(".more-views #ul-moreviews li:first-child").css("marginLeft", "0px");
        jQuery(thumbnailContainer).css("width", thumbSliderWidth);   
     
      
       jQuery(".left-thumb-slide-nav").click(function(){
            if(sliderPosition <= 0){
                return(false);
            }
            else{  
                jQuery(".right-thumb-slide-nav").fadeIn();
                jQuery(thumbnailContainer).stop().animate({marginLeft :  '+='+ moreViewsWidth}, 1000);
                sliderPosition = sliderPosition -= moreViewsWidth;
            }
       });
   
       jQuery(".right-thumb-slide-nav").click(function(){
            if(sliderPosition >= sliderResetValue){
                //jQuery(this).fadeOut();
                jQuery(".more-views #ul-moreviews").stop().animate({marginLeft : "0px"}, 1000);
                sliderPosition = 0;
            }
            else{  
                jQuery(".left-thumb-slide-nav").fadeIn();
                jQuery(thumbnailContainer).stop().animate({marginLeft :'-='+ moreViewsWidth}, 1000);
                sliderPosition = sliderPosition += moreViewsWidth;
            }
        });

};

jQuery(document).ready(function(){
    thumbnailSlider();
});


jQuery(window).resize(function() {
    if(window.resizetimeout)
    {
        clearTimeout(window.resizetimeout);
    }
    window.resizetimeout = setTimeout('thumbnailSlider()', 200);
});