I am trying to create a simple slider using the margin-left css property. However, it seems that the result is not displaying correctly with partial margin-left increments. Can anyone help me figure out what is wrong with my code?
Check out the code on jsFiddle here.
Here is the HTML:
<div class="main-padding">
<div id="wrapper-slider">
<div class="item-slider item-slider1"></div>
<div class="item-slider item-slider2"></div>
<div class="item-slider item-slider3"></div>
</div>
</div>
This is the CSS being used:
* {
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
a {
text-decoration: none;
color: inherit;
}
body {
font-size: 62.5%;
}
ul, ol {
list-style-type: none;
}
.main-padding {
padding: 20px;
}
#wrapper-slider {
height: 200px;
position: relative;
overflow: hidden;
}
.item-slider {
width: 100%;
float: left;
height: 100%;
}
.item-slider1 {
background-color: red;
}
.item-slider2 {
background-color: blue;
}
.item-slider3 {
background-color: yellow;
}
And here is the jQuery function being applied:
$(function () {
var item = ".item-slider";
var next = 1;
setInterval(function() {
$(item + next).animate({"marginLeft": "-100%"}, 1000);
next++;
}, 2000);
});