Carousel Optimization Case Study

This repository is a small Angular case study focused on optimizing a carousel implementation by moving from a JavaScript-heavy approach to a CSS-first solution.

What it compares

• old-carousel — legacy carousel approach
• modern-carousel — optimized CSS-based carousel
• virtualized-modern-carousel — CSS-based carousel with virtualization for larger datasets

Goal

Show how replacing JavaScript-driven carousel behavior with a CSS-oriented implementation can improve simplicity, maintainability, and runtime performance.

Project structure

• apps/app — demo application used to compare implementations
• libs/old-carousel — original carousel version
• libs/modern-carousel — optimized modern version
• libs/virtualized-modern-carousel — virtualized optimized version
• libs/shared and libs/ui — shared models, services, and UI pieces

Run locally

npm run serve

Then open the app and compare:

• /old-carousel
• /modern-carousel
• /virtualized-modern-carousel