[cerberus478]

Hi,

I created a slider that half way works. If I click on the left arrow then the images rotates nicely, but when I click on the right arrow that is where the problem comes in. When I click on it, it rotates to the second image but after that it goes wrong. I've no idea as to why that is happening. I included a jsfiddle so that you can see what I'm talking about.

Here is the js

$(".nav_arrows").click(function(){

      $direction1 = ($(this).hasClass("left-arrow") ? "left" : "right");

      var activeBanner1 = 100;
  




      if($direction1 == "right"){

   $(".inactive_banner").css("left","100%").show();

      activeBanner1 = -100;

      if($(".active_banner").next().length < 1){

      $(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
     $(this).addClass("active_banner").removeClass("inactive_banner");
    });
   }else{

      $(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){
     $(this).addClass("active_banner").removeClass("inactive_banner");
    });
   }






      }else{ //left

      $(".inactive_banner").css("left","-100%").show().fadeTo(250, 0);

      if($(".active_banner").prev().length < 1){

      $(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){
     $(this).addClass("active_banner").removeClass("inactive_banner");
    });
   }else{

      $(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){
     $(this).addClass("active_banner").removeClass("inactive_banner");
    });
   }
  }
  

      $(".active_banner").animate({"left":activeBanner1+"%","opacity":0}, 500,function(){
   $(this).addClass("inactive_banner").removeClass("active_banner");
  });

  
 });

Here is a jsfiddle: JSFIDDLE

[andrewsw]

I recommend that you first use more than two images. A slider with just two images is pretty pointless. More importantly, once you've got it working with two images, you pretty-much have to start over to get it working with three and more.