CodePen

HTML

            
              	<ul>
		<li><img src="images/slide-one.jpg" width="500" height="333" /></li>
		<li><img src="images/slide-two.jpg" width="500" height="333" /></li>
		<li><img src="images/slide-three.jpg" width="500" height="333" /></li>
	</ul>

<button>Next</button>
            
          
!
via HTML Inspector

CSS

            
              ul {
	list-style: none;
	padding: 0px;
	overflow: hidden;
	width: 500px;
	height: 333px;
	position: absolute;
	left: 0px;
	top: 0px;
}

ul li {
	display: inline-block;
	width:500px;
	height: 333px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function(){
  $("button").click(function(){
    $("ul").animate({left:'500px'});
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................