horizontal div with pages one by one

Good afternoon programmers friends, I have the following doubt:

I have a div (#grid) with several blocks (.item) floating side by side, but only the first 3 are being shown and the rest of the blocks are hidden. I need it when I click the > next he shows the next block one by one and hides the first one.

HTML:

<div id="grid">
<div class="prev">Voltar</div>

<div class="list">
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
</div>

<div class="next">Próximo</div>

CSS:

#content #grid{
width: 100%;
max-height: 300px;
}
#content #grid .item{
    width: 32%;
    height: 100%;
    float: left;
    border: 5px solid #dddddd;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 2%;
    font-size: 0;
}
#content #grid .item:first-child{margin-left: 0 !important}