sliderlll

klj

by Alin Guta

HTML

<div id="slider-wrapper">
        <div id="slider">
            <div class="sp" style="background: blue;">akjdfalfkdj</div>
            <div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
            <div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
            <div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
        </div>

        </div>

<div id="nav"></div>
                <div id="button-previous">prev</div>
            <div id="button-next">next</div>

CSS

#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}

#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}

JavaScript

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

    $('#button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
        
        
    });
    
       $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });
    
    
    
    
});