jquery - Custom carousel show four items always in center of screen -



jquery - Custom carousel show four items always in center of screen -

i have managed build custom carousel code had slider.\

now working have little issue lining things up! here have far:- http://goo.gl/lw4fvs

what want 4 slides show within central none faded area. can see it's off center.

i have create 4 carousel items show in center no matter screen size using.

my jquery code follows:-

var carouselsliderwidth = 0; var carouselsliderwidth = 0; var carouselimagewidth = $('.carousel-slider .carousel-slide:first').width(); var carouselcount = 0; var carouselimagecount = 0; var carouselimageleft = 0; carouselrepositionimages(); $('.carousel-slider .carousel-slide').each(function(){ carouselsliderwidth = carouselsliderwidth + $(this).width(); }); $('.carousel-slider').width(carouselsliderwidth); //alert(carouselimagewidth); function carouselrepositionimages() { carouselimageleft = 234 - (($(window).width() - 234) / 2 ); $('.carousel-slider .carousel-slide').css('left','-'+carouselimageleft+'px'); } $('a.carousel-move-left').click(function(){ if($('.carousel-slider .carousel-slide:not(":animated")').length != 0) { $('.carousel-slider .carousel-slide:first').addclass('carousel-move-0'); carouselfirstimage = $('.carousel-slider').children('.carousel-slide.carousel-move-0').clone(); $('.carousel-slider').width(carouselsliderwidth+carouselimagewidth); $('.carousel-slider').append(carouselfirstimage); $('.carousel-slider .carousel-slide').animate({'left':'-='+carouselimagewidth}, 500 ,function(){ $('.carousel-slider .carousel-slide:last').removeclass('carousel-move-0'); $('.carousel-slider').children('.carousel-slide.carousel-move-0').remove(); $('.carousel-slider .carousel-slide').css('left','-'+carouselimageleft+'px'); $('.carousel-move-0').removeclass('carousel-move-0'); }) } homecoming false; }); $('a.carousel-move-right').click(function(){ if($('.carousel-slider .carousel-slide:not(":animated")').length != 0) { $('.carousel-slider .carousel-slide:last').addclass('carousel-move-5'); carouselfirstimage = $('.carousel-slider').children('.carousel-slide.carousel-move-5').clone(); $('.carousel-slider').width(carouselsliderwidth+carouselimagewidth); $('.carousel-slider').prepend(carouselfirstimage); $('.carousel-slider .carousel-slide').css('left','-'+(carouselimageleft+carouselimagewidth)+'px'); $('.carousel-slider .carousel-slide').animate({'left':'+='+carouselimagewidth}, 500 ,function(){ $('.carousel-slider .carousel-slide:first').removeclass('carousel-move-5'); $('.carousel-slider').children('.carousel-slide.carousel-move-5').remove(); $('.carousel-slider .carousel-slide').css('left','-'+carouselimageleft+'px'); $('.carousel-move-5').removeclass('carousel-move-5'); }) } homecoming false; }); $(window).resize(function(){ carouselrepositionimages(); //resizeoverlay(); })

any help or advice on how great. give thanks kind people.

jquery carousel responsive-slides

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more