$(document).ready(function() {
    var stepSlider = 0;
    var LisSlider = $("div.slider li").length;
    var widthLi = $("div.slider li").width();
    var ulSlider = $("div.slider > div > ul");
    var next = $("div.slider > span.next");
    var prev = $("div.slider > span.prev");
    
    next.click(function() {
        prev.removeClass("notActive");
        stepSlider++;
        if(stepSlider >= LisSlider - 1) {
            $(this).addClass("notActive");
            stepSlider = LisSlider - 1
        }
        if(stepSlider < LisSlider) {
            ulSlider.animate({"marginLeft": -stepSlider * widthLi + "px"}, 500)
        }
    })
    prev.click(function() {
        next.removeClass("notActive");
        if(stepSlider > 0) {
            stepSlider--;
            ulSlider.animate({"marginLeft": -stepSlider * widthLi + "px"}, 500)
        }
        if(stepSlider == 0) {
            $(this).addClass("notActive");
        }
    })
})