slide content from right to left using jquery

Question

When you press next button, viewport changes the content(two)and do transformation.

What I want is,I want to slide the content.As you can see here in demo, using t

Answer 1

Here have a look at this JSFiddle.

Jquery

var items=$('.viewport .slider div'),
total=items.length,
index=0;

$('.next').click(function () {
  index+=1;
  cycle();
});

 function cycle() {
  item = $('.viewport .slider div').slice(index, index + 1);
  currentItem = $('.viewport .slider div').slice(index-1,index);
    if(index

CSS

.viewport{
border:1px solid;
height:100px;
width:200px;
overflow:hidden;
border-right:2px solid red;
}
.slider{
  height:100%;
  width:100%;
  position: relative;
}
div.slide{
width:200px;
height:100%;
position:absolute;
background:orange;
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-ms-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
transition:all 1.0s ease;
}
div.slide.first{
  -webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}