图像滑块：背部图像

Question

所以我跟着一个关于如何使用jQuery创建图像滑块的教程，但他没有显示如何添加下一个图像和以前的图像，所以我试图做到这一点我的自我。下一个图像部分正在工作，但我无法获得以前的图像工作。 https://jsfiddle.net/vmab7xk6/10/

//slider 
     var sliderWidth = 960; 
     var sliderSpeed = 1000; 
     var sliderPause = 5000; 
     var sliderCurrent = 1; 
     var sliderInterval; 

     var $sliderLocation = $(".slider"); 
     var $sliderContainer = $sliderLocation.find(".slides"); 
     var $sliderSlides = $sliderContainer.find(".slide"); 

    // img slider 
     function startSlider() { 
      sliderInterval = setInterval(function() { 
       $sliderContainer.animate({'margin-left': '-='+sliderWidth}, sliderSpeed, function() { 
        sliderCurrent++; 
        if(sliderCurrent === $sliderSlides.length) { 
         sliderCurrent = 1; 
         $sliderContainer.css("margin-left", 0); 
        } 
       }); 
      }, sliderPause); 
     } 

     function pauseSlider() { 
      clearInterval(sliderInterval); 
     } 

     function backSlider() { 
      $sliderContainer.animate({"margin-left": "+="+sliderWidth}, sliderSpeed, function() { 
       sliderCurrent--; 
       if(sliderCurrent === $sliderSlides.length) { 
        sliderCurrent = $sliderSlides.length - 1; 
        $sliderContainer.css("margin-left", "-1920"); 
       } 

      }); 
     } 

     function nextSlider() { 
      $sliderContainer.animate({"margin-left": "-="+sliderWidth}, sliderSpeed, function() { 
       sliderCurrent++; 
       if(sliderCurrent === $sliderSlides.length) { 
         sliderCurrent = 1; 
         $sliderContainer.css("margin-left", 0); 
       } 
      }); 
     } 

     $("#sliderControllsLeft").on("click", function() { 
      backSlider(); 
      console.log("left"); 
     }); 

     $("#sliderControllsPause").on("click", function() { 
      pauseSlider(); 
      console.log("pause"); 
     }); 

     $("#sliderControllsStart").on("click", function() { 
      startSlider(); 
      console.log("start"); 
     }); 

     $("#sliderControllsRight").on("click", function() { 
      nextSlider(); 
      console.log("right"); 
     }); 

     startSlider(); 

<section class="slider"> 
      <ul class="slides"> 
       <li class="slide"><img src="img/slider_01.jpg"></li> 
       <li class="slide"><img src="img/slider_02.jpg"></li> 
       <li class="slide"><img src="img/slider_03.jpg"></li> 
       <li class="slide"><img src="img/slider_01.jpg"></li> 
      </ul> 
      <ul class="sliderControlls"> 
       <li id="sliderControllsLeft"><</li> 
       <li id="sliderControllsPause">=</li> 
       <li id="sliderControllsStart">+</li> 
       <li id="sliderControllsRight">></li> 
      </ul> 
     </section> 

section.slider { 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
    margin: 100px 0; 
} 

section.slider .slides { 
    display: block; 
    width: 6000px; 
    height: 400px; 
    margin: 0; 
    padding: 0; 
} 

section.slider .slide { 
    width: 960px; 
    height: 400px; 
    float: left; 
    list-style-type: none; 
} 

ul.sliderControlls { 
    list-style-type: none; 
} 

ul.sliderControlls li { 
    display: inline-block; 
    font-size: 60px; 
    color: #000; 
    text-decoration: none; 
    padding: 0 10px 0 10px; 
} 

Answer 1

您有几个语法错误。查看更新的小提琴：jsfiddle

您需要在使用之前声明jQuery的简写$。我添加了一个包装函数。在你的JS上，（至少在小提琴上），你没有包含你的滑块变量 - 我添加了这些变量。