javascript - jQuery Slider is not working properly -

i working on simple jquery slider.

js bin code

if have more 2 li elements, slide effect works smoothly. 2 li elements(current code), clicking on next shows jerk effect, on click of previous link slide effect works perfect. clue or solution appreciated. in advance.

ok, edited.

as pointed in comments problem when click on next, there no fist element switch to, switches blank element , appends first element.

detailed explanation:

quite simple actually. script had 3 'active' slides. current, next , previous.

if have 2 slides, have no next slide (due ordering method use), instead of switching next slide switched empty space , placed second slide on it's position (the second slide appears after animation ends 'flickers').

now 'patch' do. basically, you'll understand once try code without patch , remove 'margin-left: -500px' slider wrap, i'll explain anyway.

let's imagine instead of list have basic array 2 values. have 2 options: next increases index 1 , and previous decreases one. initial slide has index 0, if increase index go index 1, , if decrease index -1 results in empty slide caused flickering, how script works if remove 'margin-left' <ul> element.

if add 'margin-left' goes inverted mode (next flickers, previous doesn't).

what patch detect if anomaly valid, , switch on/off margin-left value.

unfortunately, when slides switch order, append required put things in order. if remove appends in ifs you'll notice event.

patch values following:
0 - no need patch.
1 - next function needs fixed before next use.
2 - prev function needs fixed before next use.

, ifs fixing.

can fixed adding dummy element in beginning placing following code:

if($('.slider ul').length<3){           $('.slider ul li:first-child').clone().appendto('.slider ul');     } 

end erase when click on next or previous.

edit2: more elegant , complete solution! ver 2.0

edit next , prev function to:

var patched = 0; if($('.slider ul li').length==2){   patched = 1; }  var sliderwrap = $('.slider ul'),             slideelem = $('.slider ul li'),             slidecount = slideelem.length,             slidewidth = $('.slider ul li').width(),             slideheight = $('.slider ul li').height(),             sliderulwidth = slidecount * slidewidth;          $('.slider').css({ width: slidewidth, height: slideheight });         $('.slider ul').css({ width: sliderulwidth, marginleft: - slidewidth });         $('.slider ul li:last-child').prependto('.slider ul');          var previous = function() {             if(patched==2){               sliderwrap.css('margin-left','-500px');               $('.slider ul li:last-child').prependto('.slider ul');               patched=1;             }             sliderwrap.animate({                 left: + slidewidth             }, 200, function () {                 $('.slider ul li:last-child').prependto('.slider ul');                 sliderwrap.css('left', '');             });         };          var next = function() {              if(patched==1){               sliderwrap.css('margin-left','0px');               $('.slider ul li:first-child').appendto('.slider ul');               patched=2;             }             sliderwrap.animate({                 left: - slidewidth             }, 200, function () {                 $('.slider ul li:first-child').appendto('.slider ul');                 sliderwrap.css('left', '');             });         }; 

try new one: http://jsbin.com/pexigesu/32/edit

edit: cover case 1 slider only, change beginning to:

if($('.slider ul li').length==2){   patched = 1; }else if($('.slider ul li').length==1){   $('.slider ul li:last-child').clone().prependto('.slider ul');   $('.slider ul li:last-child').clone().prependto('.slider ul'); } 

it clones 1st element twice , since it's pretty same element, no control required. jsbin example