previous, next slider menu

by stackmanoz

HTML

<div class="container">
    <div class="span2">
    </div>
    <div class="span3">
    </div>
    <div class="span4"></div>
    

</div>
<div class="prev"></div>
<div class="next"></div>

CSS

.container
{
    width:100%;
    height:100%;
    border:1px solid #ccc;
    position:absolute;
    
}
.span2
{
    position:absolute;
    width:96%;
    height:90%;
    margin:2%;
    border:2px solid #ddd;
    background:#98bf26;
}
.span3
{
     position:absolute;
    width:96%;
    height:90%;
    margin:2%;
    border:2px solid #ddd;
    background:#ddd;
}
.span4
{
    position:absolute;
    width:96%;
    height:90%;
    margin:2%;
    border:2px solid #ddd;
    background:red;
    
}

.prev
{
    float:left;
    width:50px;
    height:50px;
    top:40%;
    position:relative;
    border-radius:100%;
    border:2px solid #ccc;
    
}
.next
{
    float:right;
    width:50px;
    height:50px;
    top:40%;
    position:relative;
    border-radius:100%;
    border:2px solid #ccc;
    
}
.prev:hover
{
    background:#efefef;
    cursor:pointer;
    transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
}
.next:hover
{
    cursor:pointer;
    background:#efefef;
    transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
}

JavaScript

$(function(){
    $('.container div').hide();
    $('.container div:nth-child(1)').show();
    $('.prev').click(function(){
        $('.container div:first-child').fadeOut().next().fadeIn().end().appendTo('.container');
    });
    $('.next').click(function(){
          $('.container div:first-child').fadeOut();
        $('.container div:last-child').prependTo('.container').fadeOut();
         $('.container div:first-child').fadeIn();
    });
    });