deslice el contenido de derecha a izquierda usando jquery

Question

Jul 15, 2016, 06:36 AM

deslice el contenido de derecha a izquierda usando jquery

Cuando presiona el botón Siguiente, la ventana gráfica cambia el contenido (dos) y realiza la transformación.

Lo que quiero es, quiero deslizar el contenido. Como puede ver aquí en la demostración, usandotranslateX(-200px) Me puede dar efecto deseo. pero comienza desde0px y va a-200px. Quiero que comience desde la franja roja (derecha) y termine en la franja negra (izquierda) para cada div.

En resumen, quiero deslizar el contenido de derecha a izquierda con esta configuración.

NOTA: intente eliminar,

item.css({

    "transform": "translateX(-200px)",

    "transition":"all 1.0s ease"
    })

esta parte y funcionará como se espera sin deslizamiento. Solo quiero implementar el deslizamiento.

demo:https://plnkr.co/edit/YylT0p7GGl44WRiMoOGj?p=preview

<!DOCTYPE html>
<html>
<body>

 <div class="viewport">
     <div class="slider">
       <div class="slide">one</div>
       <div class="slide">two</div>
       <div class="slide">three</div>
       <div class="slide">four</div>
       <div class="slide">five</div>
       <div class="slide">six</div>
     </div>
 </div>

<div class="next">Next</div>
<script>
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);
items.hide();
item.show();


item.css({

"transform": "translateX(-200px)",

"transition":"all 1.0s ease"
})

}
</script>
</body>
</html>