Dounia Dounia - 2 months ago 9
Javascript Question

Simple JQuery slider not working properly

I am new to jQuery and javascript and I am working on some animations to practice my new skills. The following code is a simple slider that cycles through 4 slides with setInterval() and can also be navigated on click. The slider works fine except for when the first or last slide is active and the buttons are clicked. In this case, the slider shows a blank slide before cycling back. I tried to manipulate the ul on click when the margin-left is equal to -2880px, without any success. Here is my code:



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);
})
$(document).ready(function() {
$(".right").click(function() {
$("#my-slider").animate({"margin-left": "-=720px"}, 1000);
});

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

.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>





Thank you for your help.

Answer

I Think it`s the simplest solution!

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() {

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

   }); 


});
.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>

Comments