Simple Slider system with Dynamic Controls

Simple Slider system with Dynamic Controls

by Andrew Pougher

HTML

<button class="date-nav-prev">< Prev</button>
<button class="date-nav-next">Next ></button>
<div id="slidewrapper">
    <div id="slider">
        <div id="slideone">ONE</div>
        <div id="slidetwo">TWO</div>
        <div id="slidethree">THREE</div>
    </div>
</div>
<div id="pageon"></div>

CSS

#slidewrapper{
    width:980px; 
    height:400px; 
    border:1px solid #efefef;
    position:relative; 
    overflow:hidden;
}
#slider {
    width: 1000px;
    height: 100%;
    position: absolute;
}
#slider div {
    width:980px; 
    height:100%; 
    float:left; 
}
#slideone{background:#ead1d1;}
#slidetwo {background:#dad1ea;}
#slidethree {background:#ddead1;}

JavaScript

var sliderWidth = 980;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);
var n = 1
 $('.date-nav-prev').hide();


  if(sliderCount  < 2){
		 $('.date-nav-next').hide();
		 }

$('.date-nav-prev').click(function () { 
    n--
        getState(n);
    $('#slider').animate({left: '+='+sliderWidth}, 500);
});

$('.date-nav-next').click(function () {
    n++
           getState(n);
    $('#slider').animate({left: '-='+sliderWidth}, 500);
});

function getState(n){
$("#pageon").html(n);
    if(n > 1 ){  $('.date-nav-prev').show(); }else{$('.date-nav-prev').hide(); }
     if(n > 2 ){  $('.date-nav-next').hide(); }else{$('.date-nav-next').show(); }
}