单击next和previous以显示溢出div

Question

我有很多overflow:hidden;个项目，如果我点击下一个和之前的内容，如何在下面的示例中显示overflow:hidden;个项目？我也希望有前进和后退的效果。我尝试了一些插件但是当我点击下一个并且上一个时它不起作用。知道如何轻松做到这一点吗？

.container{
    width:580px;
  height:70px;
  background:#ccc;
  overflow-y:hidden;
  }

.item{
    display:inline-block;
    z-index:5;
    background:#fff;
    margin:5px;
    padding-top:10px;
    width:100px;
    height:50px;
    text-align:center;
  }

.prev , .next{
  cursor:pointer;
  width:50px;
  }

.prev:hover , .next:hover{
  background:#000;
  color:#fff;
  }

<div class="prev">Prev</div>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>
<div class="next">Next</div>