간단한 JQuery 슬라이더가 제대로 작동하지 않습니다.

Question

저는 jQuery와 javascript를 처음 사용하며 새로운 기술을 익히기 위해 일부 애니메이션 작업을하고 있습니다. 다음 코드는 setInterval()을 사용하여 4 개의 슬라이드를 순환하고 클릭시 탐색 할 수있는 간단한 슬라이더입니다. 첫 번째 또는 마지막 슬라이드가 활성화되어 있고 단추를 클릭 한 경우를 제외하고는 슬라이더가 올바르게 작동합니다. 이 경우 슬라이더에 빈 슬라이드가 표시되어 다시 순환됩니다. 마진 왼쪽이 -2880px 일 때 아무런 성공없이 클릭 할 때 ul을 조작하려고했습니다.

var i = 0; 
 

 
$(document).ready(function() { 
 
    setInterval(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
 
    \t i++; 
 
    \t if(i === 4) { 
 
      i = 0; 
 
      $("#my-slider").css("margin-left", 0); 
 
    \t } 
 
    }); 
 
    }, 5000); 
 
    }) 
 
    $(document).ready(function() { 
 
$(".right").click(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000); 
 
}); 
 

 
$(".left").click(function() { 
 
\t $("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
 
    }); 
 
});

.slider-wrapper { 
 
\t width: 50%; 
 
\t height: 400px; 
 
\t margin: 0 auto; 
 
\t overflow: hidden; 
 
} 
 

 
.slider-wrapper ul { 
 
\t list-style-type: none; 
 
\t width: 3600px; 
 
\t max-width: 3600px; 
 
\t height: 400px; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.slider-wrapper li { 
 
\t float: left; 
 
\t width: 720px; 
 
\t height: 400px; 
 
} 
 

 
#slide1 { 
 
background: #04151F; 
 
} 
 

 
#slide2 { 
 
\t background: #183A37; 
 
} 
 

 
#slide3 { 
 
\t background: #EFD6AC; 
 
} 
 

 
#slide4 { 
 
\t background: #C44900; 
 
} 
 

 
#slide5 { 
 
\t background: #04151F; 
 
} 
 

 
.left, .right { 
 
\t font-size: 40px; 
 
\t z-index: 1; 
 
\t position: fixed; 
 
\t float: right; 
 
\t margin: -15% 0 0 0.5%; 
 
\t cursor: pointer; 
 
\t color: #FFF; 
 
} 
 

 
.right { 
 
\t margin-left: 47%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider-wrapper"> 
 
\t <ul id="my-slider"> 
 
\t \t <li id="slide1"></li> 
 
\t \t <li id="slide2"></li> 
 
\t \t <li id="slide3"></li> 
 
\t \t <li id="slide4"></li> 
 
\t \t <li id="slide5"></li> 
 
\t </ul> 
 
\t <p class="left">&larr;</p> 
 
\t <p class="right">&rarr;</p> 
 
</div>

여러분의 도움에 감사드립니다 : 여기 내 코드입니다.

Answer 1

나는 가장 간단한 해결책이라고 생각합니다.

https://jsfiddle.net/nbLz6zzb/1/

var i = 0; 
 

 
$(document).ready(function() { 
 

 
    setInterval(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
 
     i++; 
 
     if(i === 4) { 
 
      i = 0; 
 
      $("#my-slider").css("margin-left", 0); 
 
     } 
 
    }); 
 
    }, 5000); 
 

 

 
///////////////////////////////////// 
 

 
$(".right").click(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
 
     i++; 
 
     if(i === 4) { 
 
      i = 1; 
 
      $("#my-slider").css("margin-left", 0); 
 
     } 
 
    });  
 
}); 
 

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

 
\t if ($("#my-slider").css("margin-left") <= '720px' && $("#my-slider").css("margin-left") >= '0px') { 
 
\t \t $("#my-slider").animate({"margin-left": "-2880px"}, 1000); 
 
\t } else { 
 
\t \t $("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
 
\t } 
 

 
    }); 
 

 

 
});

.slider-wrapper { 
 
width: 50%; 
 
height: 400px; 
 
margin: 0 auto; 
 
overflow: hidden; 
 
} 
 

 
.slider-wrapper ul { 
 
list-style-type: none; 
 
width: 3600px; 
 
max-width: 3600px; 
 
height: 400px; 
 
padding: 0; 
 
margin: 0; 
 
} 
 

 
.slider-wrapper li { 
 
float: left; 
 
width: 720px; 
 
height: 400px; 
 
} 
 

 
#slide1 { 
 
background: #04151F; 
 
} 
 

 
#slide2 { 
 
background: #183A37; 
 
} 
 

 
#slide3 { 
 
background: #EFD6AC; 
 
} 
 

 
#slide4 { 
 
background: #C44900; 
 
} 
 

 
#slide5 { 
 
background: #04151F; 
 
} 
 

 
.left, .right { 
 
font-size: 40px; 
 
z-index: 1; 
 
position: fixed; 
 
float: right; 
 
margin: -15% 0 0 0.5%; 
 
cursor: pointer; 
 
color: #FFF; 
 
} 
 

 
.right { 
 
margin-left: 47%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider-wrapper"> 
 
<ul id="my-slider"> 
 
    <li id="slide1"></li> 
 
    <li id="slide2"></li> 
 
    <li id="slide3"></li> 
 
    <li id="slide4"></li> 
 
    <li id="slide5"></li> 
 
</ul> 
 
<p class="left">&larr;</p> 
 
<p class="right">&rarr;</p> 
 
</div>

Answer 2

버튼의 사이클 코드도 사용해야합니다.

$(document).ready(function() { 
$(".right").click(function() { 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
    i++; 
     if(i === 4) { 
      i = 0; 
      $("#my-slider").css("margin-left", 0); 
     } 
    }); 
});