slideshow css js

Bonjour,
j'essaie de réalise un slideshow en css + js mais je rencontre un problème que je n'arrive pas à résoudre.
Voici mon code : https://jsfiddle.net/muk25fwz/
Je voudrais que les images défilent vers la droite avec l'image de gauche qui apparait par opacité croissante et celle de droite disparait (et est remplacée par l'image du centre) par opacité décroissante.
Le problème est qu'en défilant les images avec la flèche droite, l'image de droite se met à parcourir l'écran vers la gauche pour se positionner derrière l'image de gauche, mais je ne veux pas que cela se voit, je veux que seul l'effet d'opacité soit apparent.
J'espère avoir été compréhensible et merci pour votre aide !

Bonjour,
je n'ai pas regardé le code avant et je dirais qu'en fin de transition opacity:1 -> opacity:0 il te suffit de déplacer l'image à gauche.

A voir également si l’utilisation des @keyframes ne serait pas un plus en jouant avec les classes !

[EDIT] le temps de répondre et je vois que la discussion est résolue :koi: