Sep 5, 2018 · 1 min read
Thank you. I made a couple of changes to make it responsive.
Changed the animation to % instead of pixel
private buildAnimation(offset) {
return this.builder.build([
animate(this.timing, style({ transform: `translateX(-${offset}%)` }))
]);
}
Change the ngAfterViewInit to use percentages.
ngAfterViewInit() {
setTimeout(() => {
let w: string = (this.itemsElements.length * 100) + ‘%’;
this.renderer.setStyle(this.carousel.nativeElement, ‘width’, w);
let slideWidthInContainer: string = (100 / this.itemsElements.length) + ‘%’;
this.itemWidth = (100 / this.itemsElements.length);
this.itemsElements.forEach(el => {
this.renderer.setStyle(el.nativeElement, ‘width’, slideWidthInContainer);
});
this.carouselWrapperStyle = {
width: `100%`
}
}, 0);
}