Danny Dineen
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);

}