Looking to create a carousel slideshow with images sliding from right to left and smoothly transition to the next image.
All the necessary code can be found in this STACKBLITZ
Here is the HTML snippet:
<ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Random slide">
</div>
<div class="carousel-caption">
<button>Touch to start</button>
</div>
</ng-template>
</ngb-carousel>
The carousel animations for the smooth transitions:
animations: [
trigger('slide', [
state('previousLeft', style({
display: 'none',
transform: 'translateX(-100%)'
})),
state('previousRight', style({
display: 'none',
transform: 'translateX(100%)'
})),
transition('hidden => activeLeft, previousRight => activeLeft', [
style({
display: 'block',
transform: 'translateX(100%)'
}),
animate('0.6s')
]),
transition('hidden => activeRight, previousLeft => activeRight', [
style({
display: 'block',
transform: 'translateX(-100%)'
}),
animate('0.6s')
]),
transition('activeLeft => previousLeft, activeRight => previousRight,' +
'activeRight => previousLeft, activeLeft => previousRight,' +
'active => previousLeft, active => previousRight', [
style({
display: 'block'
}),
animate('0.6s')
])
])
],
Desired functionality similar to this example: Another Stackblitz
Any assistance would be greatly appreciated to achieve this feature.