Simple JQuery Slider funktioniert nicht richtig

Question

Ich bin neu in jQuery und Javascript und ich arbeite an einigen Animationen, um meine neuen Fähigkeiten zu üben. Der folgende Code ist ein einfacher Schieberegler, der mit setInterval() vier Folien durchläuft und auch beim Klicken navigiert werden kann. Der Schieberegler funktioniert einwandfrei, außer wenn die erste oder letzte Folie aktiv ist und auf die Schaltflächen geklickt wird. In diesem Fall zeigt der Schieberegler vor dem Zurückfahren eine leere Folie an. Ich habe versucht, die ul auf Klick zu manipulieren, wenn der Rand links -2880px ist, ohne Erfolg. Hier ist mein Code:

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>

Vielen Dank für Ihre Hilfe.

Answer 1

Ich denke, es ist die einfachste Lösung!

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

Sie müssen den Code aus Ihrem Zyklus auch für die Tasten verwenden.

$(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); 
     } 
    }); 
});