I'm currently working on a slider and encountering a few challenges.
1) The animation on the first slide isn't functioning as expected.
2) The spacing for the last box initially appears incorrect, but adjusts as the slider progresses.
3) I'm noticing occasional stuttering in the animations.
You can view the codepen here:
http://codepen.io/mpaccione/pen/MyJNxM
Any insights or advice would be greatly appreciated. I'm unsure why these issues are occurring. For the animation, I'm using CSS transitions and JavaScript/jQuery to manipulate the CSS/DOM calculations.
CODE
<style type="text/css">
html,body {
margin: 0;
background-color: #888;
height: 100%;
width: 100%;
box-sizing: border-box;
}
#slider {
width: 100%;
height: 100%;
display: block;
position: relative;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
// Remaining CSS and JavaScript code included...