jquery custom thumbnails slider images not sliding?
Hello All,
in my code the slider is not working for all resolutions, Mainly not working in mobile screens.
I want that my thumbnails images should move like:
http://preview.codecanyon.net/item/lightweight-ecommerce-product-jquery-plugin-ubislider/full_screen_preview/18707690
Example 1 | Horizontal
Here is the code:
- jQuery(".ulwrp").css('width',(jQuery(".small-img-li li").length*jQuery(".small-img-li li").width())+50);
var h= jQuery(window).height(); // New height
var w = jQuery(window).width(); // New width
jQuery('.small-img-li li').click(function()
{
var curclass = jQuery(this).attr('class');
var curpos = jQuery(this).attr('position');
var totalclass = jQuery('.small-img-li li').length;
if(curpos==5)
{
if(curclass!=totalclass)
{
if(jQuery('.small-img-li li').length!=curclass)
{
jQuery('.small-img-li').animate({ scrollLeft: "+=100px" }, "slow");
}
jQuery('.small-img-li li.'+curclass).attr('position','');
jQuery('.small-img-li li.'+curclass+' img').attr('position','');
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)+1)).attr('position',5);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)+1)+' img').attr('position',5);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)-3)).attr('position',1);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)-3)+' img').attr('position',1);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)-4)).attr('position','');
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)-4)+' img').attr('position','');
}
}
if(curpos==1)
{
if(curclass!=1)
{
if(jQuery('.small-img-li li').length!=curclass)
{
jQuery('.small-img-li').animate({ scrollLeft: "-=100px" }, "slow");
}
jQuery('.small-img-li li.'+curclass).attr('position','');
jQuery('.small-img-li li.'+curclass+' img').attr('position','');
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)-1)).attr('position',1);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)-1)+' img').attr('position',1);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)+3)).attr('position',5);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)+3)+' img').attr('position',5);
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)+4)).attr('position','');
jQuery('.small-img-li li.'+parseInt(parseInt(curclass)+4)+' img').attr('position','');
}
}
});
jQuery('.goforit').click(function()
{
jQuery('#bannerimg').attr('src',jQuery(this).attr('src'));
});
jQuery('#lg-next').click(function(){
var liid = jQuery('.lg-img.active').attr('id');
if(jQuery('.lg-img').length!=liid){
jQuery('.lg-img.active').css('display','none');
jQuery('.lg-img.active').removeClass('active');
var nextli = parseInt(liid)+1;
jQuery(".lg-img#"+nextli).css('display','block');
jQuery(".lg-img#"+nextli).addClass('active');
}
});
jQuery('#lg-previous').click(function(){
var liid = jQuery('.lg-img.active').attr('id');
if(liid!=1){
jQuery('.lg-img.active').css('display','none');
jQuery('.lg-img.active').removeClass('active');
var nextli = parseInt(liid)-1;
jQuery(".lg-img#"+nextli).css('display','block');
jQuery(".lg-img#"+nextli).addClass('active');
}
});