jQuery cómo cambiar el valor de fotogtwigs clave de – a con jQuery?

Estoy tratando de construir un control deslizante con un poco de animación.

Quiero agregar reproducir un fotogtwig clave cada 6 segundos o algo así. El fotogtwig clave cambia el margen del contenedor donde tengo mis imágenes, para que se vuelvan visibles. Pero, ¿cómo puedo cambiar los valores de fotogtwigs clave?

@keyframes slide-img{ from {margin-left: -310px;} to {margin-left: -620px;} } 

por jQuery?

Pensé que sería posible así:

 var animation = $(".slide-img"); animation.css({"from": "margin-left", "-310px";"to":"margin-left", "-620px"}); 

Puede ver el código completo aquí:

https://codepen.io/Insane415/pen/awymJZ

(Comenté mi animation.css (…) porque detuvo la animación.

Por cierto, más adelante quiero lograr que el usuario pueda hacer clic en los puntos / miniaturas y se deslice hacia la imagen. ¿Sería posible cambiar la fuente de img o hay una manera más fácil?

Porque si la diapositiva está actualmente en el primer punto y el usuario hace clic en el cuarto punto, no quiero hacer una animación de las imágenes 1 a 2, a 3, a 4, solo de 1 a 4. El único De la forma en que esto podría ser posible es cambiando la fuente de img, creo. ¿O hay una forma más fácil?