Responsive Carousel with Smooth Transitions in Angular

Create a responsive carousel with a height of 96 units that features three images. Each image should take the full width of the container and adapt to the screen size while maintaining its aspect ratio. Include the following images in the carousel: Ensure smooth transition effects when navigating between slides (e.g., 700ms ease in out) and make the carousel overflow hidden for clean boundaries. Use flexbox for the carousel layout to align items horizontally. Each slide should occupy 100% of the container width. Provide navigation arrows or dots for better user interaction if possible.