sliderlll

klj

by bluey

HTML

<div id="slider-wrapper">
    <div id="slider">
        <div class="sp" style="background: blue;">
            <img class='imgShowImg' src='http://ariia.co.uk/home/images/assets/hd-wide-1.png' />
        </div>
        <div class="sp" style="background: yellow;">
            <img class='imgShowImg' src='http://ariia.co.uk/home/images/assets/hd-wide-2.png' />
        </div>
        <div class="sp" style="background: green;">
            <img class='imgShowImg' src='http://ariia.co.uk/home/images/assets/hd-wide-3.png' />
        </div>
       
    </div>
</div>
<div id="nav"></div>
<button id="button-previous">prev</button>
<button id="button-next">next</button>

CSS

.imgShowImg{
    width: 100%;
}
#slider-wrapper {
    width:100%;
    height:200px;
}
#slider {
    width:100%;
    height:200px;
    position:relative;
}
.sp {
    width:100%;
    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();
    });




});