Animating unknown number of items - animation

Question

I have a div with x images in it aligned horizontally. The div is only showing one image at a time. When I press a button I want to animate the items until the next image is visible. I tried using animation triggers but since I could have unknown number of images I don't know how to change the translate variable within the trigger. When I set state to 'in' it animates once to -100% but I want it to continue to animate to the next image when I click the button again. So for the third image I would need to change the translateX to -200%.
Is there a way to do it, or another way to handle this kind of animation?
trigger('animateX', [
state('in', style({ transform: 'translateX(-100%)' })),
transition('start => in', [
style({
transform: 'translateX(0%)'
}),
animate('0.2s ease-in')
])
])
The template....
<div class="carousel">
<ul class="images">
<li [#animateX]="state">
<img src="myImage1" />
</li>
<li [#animateX]="state">
<img src="myImage2" />
</li>
<li [#animateX]="state">
<img src="myImage3" />
</li>
<ul >
[UPDATE] I would like to add a forward and back buttons which animate the carousel into the corresponding direction. So far I have the following trigger and it works ok except for two cases:
If I press next and then I press the back button the new item appears correctly but the current item leaves into the wrong direction. If I press back again then it is ok. It's only when switching the states from next to prev and vice versa.
When showing the carousel initially I don't want any animation to occur. The carousel should simply show the first item.
Here is the trigger code and below it a plunkr from #micronyks
trigger('animateX', [
state('next', style({})),
transition('* => next', [
style({ transform: 'translatex(100%)' }),
animate(300)
]),
transition('next => void', [
animate(300, style({ transform: 'translateX(-100%)' }))
]),
state('prev', style({})),
transition('* => prev', [
style({ transform: 'translatex(-100%)' }),
animate(300)
]),
transition('prev => void', [
animate(300, style({ transform: 'translateX(100%)' }))
])
])
http://plnkr.co/edit/SS3nb7bkl3YBMoViDsRz?p=preview