Slider not showing image

Slider not showing image

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.

Here is the js
  2. $(".nav_arrows").click(function(){
  3. $direction1 = ($(this).hasClass("left-arrow") ? "left" : "right");
  4. var activeBanner1 = 100;



  9. if($direction1 == "right"){

  11. $(".inactive_banner").css("left","100%").show();
  12. activeBanner1 = -100;
  13. if($(".active_banner").next().length < 1){
  14. $(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){
  15. $(this).addClass("active_banner").removeClass("inactive_banner");
  16. });
  17. }else{
  18. $(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){
  19. $(this).addClass("active_banner").removeClass("inactive_banner");
  20. });
  21. }





  27. }else{ //left
  28. $(".inactive_banner").css("left","-100%").show().fadeTo(250, 0);
  29. if($(".active_banner").prev().length < 1){
  30. $(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){
  31. $(this).addClass("active_banner").removeClass("inactive_banner");
  32. });
  33. }else{
  34. $(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){
  35. $(this).addClass("active_banner").removeClass("inactive_banner");
  36. });
  37. }
  38. }
  40. $(".active_banner").animate({"left":activeBanner1+"%","opacity":0}, 500,function(){
  41. $(this).addClass("inactive_banner").removeClass("active_banner");
  42. });

  45. });

My HTML
  2. <div class="slider-wrapper">
  3.     <div class="banner_wrapper active_banner" style="display: block; left: 0%; opacity: 1;">
  4.         <img class="bgwidth" src="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg" />
  5.     </div>   
  6.     
  7.     <div class="banner_wrapper inactive_banner" style="left: 100%; opacity: 0;">
  8.         <img class="bgwidth" src="http://s25.postimg.org/xwhf4srqn/mini_blue_fairy.jpg" />
  9.     </div>      
  10.     
  11.     <a class="left-arrow nav_arrows" href="javascript:void(0);">
  12.         <img src="http://s25.postimg.org/3uhfk0for/left_arrow.png" />
  13.     </a>      
  14.     
  15.     <a class="right-arrow nav_arrows" href="javascript:void(0);">
  16.         <img src="http://s25.postimg.org/gzwxq49kb/right_arrow.png" />
  17.     </a>        
  18. </div>
My CSS
  2. .banner_wrapper img {
  3.      position: absolute; 
  4. }
  5. .banner_wrapper .relative {
  6.     width: 100%;
  7.     height: 100%;
  8.     position: relative;
  9. }
  10. .bgwidth {
  11.     /*  width: 100%; */
  12. }
  13. .bgheight {
  14.     display: block;
  15.     height: 100%;
  16.     margin: 0 auto;
  17. }

  19. .right-arrow {
  20.     background: none repeat scroll 0 0 black;
  21.     position: absolute;
  22.     right: 9%;
  23.     top: 37%;
  24. }

  26. .right-arrow img{
  27.     position: relative;
  28. }

  30. .left-arrow {
  31.     background: none repeat scroll 0 0 black;
  32.     left: 8%;
  33.     position: absolute;
  34.     top: 37%;
  35.     z-index: 1;
  36. }

  38. .left-arrow img{
  39.     position: relative;
  40. }
Here is a jsfiddle:  JSFIDDLE