CodePen

HTML

            
              <div id="main-slider-space">
    <div class="slider-wrapper">
        
        <div id="slide1" class="main-slide">
            
        </div><!-- end of slide1 -->   
        
        <div id="slide2" class="main-slide">
            
        </div><!-- end of slide2 -->   
        
    </div> <!-- end of slider-wrapper -->   
</div><!-- end of main-slider-space -->

<div id="main-slider-next" class="slider-buttons"><a class="active" href="#"></a></div>

            
          
!
via HTML Inspector

CSS

            
              #main-slider-space {
	overflow:hidden;
	width:600px;
	height:300px;
	background-color:#C36;
	margin-left:50px;
}

.slider-wrapper {
	position:relative;
	left:0;
	width:3000px;
	height:100%;
}

.main-slide {
	width:600px;
	height:100%;
	float:left;
}

#slide1 { background-color:#5FF; }
#slide2 { background-color:#F5F; }

.slider-buttons {
    position:absolute;
    width:30px;
    height:30px;
}

.slider-buttons:hover { cursor:pointer; }

#main-slider-next {
    background-color:#99CC66;
    left:660px;
    top:50%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function goto(id, t){
	$(".slider-wrapper").animate({"left": -($(id).position().left)}, 600);
}

$(document).ready(function(e) {
   $('#main-slider-next').click(function(e) {
		e.preventDefault();
        goto('#slide2', this);
		return false;
    }); 
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................