sliderlll

klj

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 id="button-previous">prev</div>
            <div id="button-next">next</div>
        </div>

CSS

#slider-wrapper {
    display: block;
    max-width: 790px;
    margin: 5% 10%;
    max-height: 500px;
    height: 100%;
    background: blue;
}
#slider {
    display: block;
    position: relative;
    z-index: 99999;
    max-width: 710px;
    width: 100%;
    margin: 0 auto;
    background: red;
}
#button-previous {
    position: relative;
    left: -40px;
    margin-top: 40%;
    width: 40px;
    height: 60px;
}
#button-next {
    position: relative;
    margin-top: 40%;
    float: right;
}
.sp {
    position: absolute;
}
#slider .sp {
    max-width: 710px;
    width: 100%;
    max-height: 500px;
    height: 40px;
}

JavaScript

$("#slider > div:gt(0)").hide();
$("#button-next").click(function () {
    $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .appendTo("#slider");
});

$("#slider > div:gt(0)").hide();
$("#button-previous").click(function () {
    $("#slider > div:last")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .appendTo("#slider");
});