滑块不起作用margin-left：0

Question

我正在学习jQuery，我在下面做了这个简单的代码来为幻灯片之类的三个图像制作动画。问题是当最后一个图像被洗澡时，代码应该回去做margin-left 0并再次开始幻灯片，但它不起作用。

$(function() { 
 

 
\t \t \t var width = 809; 
 
\t \t \t var animationSpeed = 1000; 
 
\t \t \t var pause = 1000; \t 
 
\t \t \t var currentSlide = 1; 
 

 
\t \t \t var $slideContainer = $("#slideshow .slides"); 
 
\t \t \t var $slide = $("#slideshow .slide"); 
 

 

 
\t \t \t setInterval(function() { \t \t \t 
 
\t \t \t $slideContainer.animate({ 'margin-left': '-='+width }, animationSpeed, function(){ 
 
\t \t \t \t $("#console").html("Posicao: "+currentSlide); 
 
\t \t \t \t currentSlide++; \t \t \t \t 
 
\t \t \t \t if (currentSlide === $slide.length){ 
 
\t \t \t \t \t currentSlide = 1; 
 
\t \t \t \t \t $slideContainer.css('margin-left: ', 0); 
 
\t \t \t \t } \t 
 
\t \t \t }); 
 
\t \t }, pause); \t 
 
\t \t });

\t \t #slideshow { \t \t \t 
 
\t \t \t width: 809px; 
 
\t \t \t height: 449px; 
 
\t \t \t overflow: hidden; 
 
\t \t } 
 
\t \t #slideshow .slides { 
 
\t \t \t display: block; 
 
\t \t \t width: 3236px; 
 
\t \t \t height: 449px; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 
\t \t #slideshow .slide { 
 
\t \t \t float: left; 
 
\t \t \t list-style-type: none; 
 
\t \t \t width: 809px; 
 
\t \t \t height: 449px;

<div id="slideshow"> 
 
<ul class="slides"> 
 
\t <li class="slide"><img src="teste1.jpg" /></li> 
 
\t <li class="slide"><img src="teste2.jpg" /></li> 
 
\t <li class="slide"><img src="teste3.jpg" /></li> 
 
\t <li class="slide"><img src="teste1.jpg" /></li> 
 
</ul> 
 

 
</div>

Answer 1

$slideContainer.css('margin-left: ', 0); is incorrect 
$slideContainer.css('margin-left', 0); correct 

https://api.jquery.com/css/