Basic Image Slider

by Marcus Baptiste

HTML

<div id="display"> </div>
<div id="slider">
    <div class='box'  ><img id="img0" src="" alt="image 1" />
    </div>
    <div class='box'> <img id="img1" src="" alt="image 2" /></div>
    <div class='box'> <img id="img2" src="" alt="image 3" /></div>
    <div class='box'> <img id="img3" src="" alt="image 4" /></div>
    <div id="cover_left"> </div>
<div id="cover_right"> </div>
</div>

CSS

* { margin: 0; border: 0; padding: 0}

#slider{   width: 800px;   height: 150px;    border-top: 4px solid #FFA;
    border-bottom: 4px solid #FFA; margin: 0 auto;   background-color: black; 
     position: relative;
}

#cover_left, #cover_right { width: 200px;  height: 150px;  
    background-color: #999; opacity: 0.5;   position: absolute; }

#cover_left{   background-image: none; left: 0; }
#cover_right{  background-image: none; left: 400px }

#cover_left:hover { opacity: 0.7}
#cover_right:hover {opacity: 0.7 }
#display {    width: 300px;  height: 200px;  border: 2px solid black;
    margin: 0 auto;}
.box {    width: 200px; height: 150px; background-color: red; float: left; position: relative; }
.box img {    margin: 0 auto; }

#img0, #img1, #img2, #img3 { width: 200px; height: 150px;}
#img0 { background-color: blue; }
#img1 { background-color: green; }
#img2 { background-color: orange; }
#img3 { background-color: purple }

JavaScript

$(document).ready(function() {    
    var curr = 1;
    function setImage(ind) {    
        $("#display")
            .css("background-color",
            $("#img"+ind).css("background-color"));
    }
    
    setImage(curr);
    
    $("#cover_left").click(function(){
        if (curr > 0) {    
            curr--;
            $(".box").animate({ left: "+=200"}, function() {                
                setImage(curr);   
            });            
        }        
    });
    $("#cover_right").click(function(){
        if (curr < 3) {
            curr++;
            $(".box").animate({left:"-=200"}, function() {                
                setImage(curr);
            });
        }
    });
    
  
    
});