Instructions

In this practice project, you will develop a Testimonial Carousel for the creator services app, CreativSync. This app helps creators manage various aspects of their business, including invoicing, CRM, revenue tracking, messaging, and brand partner discovery.

The carousel will showcase testimonials from creators who have benefited from these features, to help other customers understand the impact the product.

Your assignment is to build an interactive carousel that cycles through customer testimonials. These testimonials should highlight the app's key features and provide real-world insights into how CreativSync is beneficial for creators.

It’s possible to complete this project entirely using HTML, CSS, and vanilla JavaScript. If you wish, you may use a library or framework React, Vue, or Angular if you want to practice any of those, or as an alternative, use TypeScript to practice strongly-typed JavaScript.

Try to make your finished product look as much like the provided designs as possible.

Aim for professional-grade code in your solution. Refactor your code so it's efficient and adheres to best practices. Practice test-driven development, write DRY code, choose clear variable names, ensure all comments are explicitly needed and are clear.

User Stories

Ensure your code delivers the following functionality to your users:

1. View Testimonials: As a visitor, I want to see various testimonials from creators so that I can understand how others are benefiting from using CreativSync.
2. Navigate Testimonials: As a visitor, I want to manually navigate through the testimonials using previous and next buttons.
3. Automatic Play: As a visitor, I expect the testimonials to automatically transition every few seconds so that I can view the testimonials without manual input.

Stretch Goals

To go above and beyond, consider adding one or more of the following features:

• Add touch swipe functionality for mobile users.
• Implement accessibility features like keyboard navigation and ARIA roles for better accessibility.
• Improve the performance of the carousel by implementing lazy loading for images.