Step by step slider

by sarathsprakash

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<div class="content">
    <form action="#" method="post">
        <div id="fstep_1">
            <p>THIS IS STEP 1</p>
        </div>
        <div id="fstep_2">
            <p>THIS IS STEP 2</p>
        </div>
        <div id="fstep_3">
            <p>This is STEP 3</p>
        </div>
        <div id="fstep_4">
            <p>THIS IS STEP 4</p>
            <input type="submit" value="submit" />
        </div>
    </form>
</div>
<div class="steps"> <a href="#">Next</a>
 <span class="fstep_1">1</span>
 <span class="fstep_2">2</span>
 <span class="fstep_3">3</span>
 <span class="fstep_4">4</span>

</div>

CSS

body {
    overflow: hidden;
}
div.content div {
    position: absolute;
    width:100%;
    left:0px;
    top:10px;
    height:100px;
}
#fstep_1 {
    position: relative;
    left:0px;
}
#fstep_2 {
    left:100%;
}
#fstep_3 {
    left:200%;
}
#fstep_4 {
    left:400%;
}
.steps {
    position: fixed;
}
.active {
    color:red;
}

JavaScript

var i = 1;
$('.' + $(".content div").eq(0).attr('id')).addClass('active');
$(document).on('click', '.steps a ', function () {
    if (i < $(".content div").length) {
        var last = $(".content div").eq(i - 1)
        var panel = $(".content div").eq(i);
        $('.' + last.attr('id')).removeClass('active');
        $('.' + panel.attr('id')).addClass('active');
        $.scrollTo(panel, 400);
        i++;
    }
});