Slide multiple elements from side to side with Angular

How to use Angular animations to make multiple elements slide from side to side. Something like Slick Slider is doing but custom using angular animations. All examples I could find was with jQuery (that I don't use) or it's sliding just one element.

What I want to achieve is something like this but without jQuery.

This is my html structure

<section class="container">
<div class="container-fluid">
<div class="slider-wrap">
<div class="slider-main">
<ng-container *ngFor="let item of items; index as i;">
<div class="item">
<img [src]="item.src"/>
</div>
</ng-container>
</div>
<div class="slider-butons">
<button type="button" class="previous>Prev</button>
<button type="button" class="next>Next</button>
</div>
</div>
</div>
</section>


And my SCSS looks like this:

.container {
padding: 20px 0;

.container-fluid {
.slider-wrap {
position: relative;
overflow: hidden;
height: 80px;

.slider-main {
position: absolute;
width: 200%;

.item {
position: relative;
display: inline-block;
width: 60px;
height: 80px;
margin: 0 3px;

img {
width: 100%;
height: 100%;
}
}
}
.slider-buttons {
button {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);

&.previous {
left: 20px;
}
&.next {
right: 0;
}
}
}
}
}
}


Also I use 2 directives to slide right or left like this:

[...]
export class NextDirective {

constructor(private el: ElementRef) {}

@HostListener('click')
nextFunc() {
var elm = this.el.nativeElement.parentElement.parentElement.children[0];
var item = elm.getElementsByClassName("item");
elm.append(item[0]);
}

}


The previous directive is mostly the same only using prepend function.

Continue reading...