This project demonstrates a responsive carousel built with React and TypeScript. The carousel automatically adapts to the width of the screen and supports touchpad or mouse wheel navigation.
- Responsive design: The carousel adjusts its width based on the viewport width.
- Mouse wheel / touchpad support: Users can navigate through the carousel using their mouse wheel or touchpad.
- Smooth transitions: The carousel uses CSS transitions to provide a smooth experience while navigating between slides.
These instructions will help you set up the project on your local machine for development purposes.
- Node.js (version 12.x or later recommended)
- npm (version 6.x or later recommended)
- Clone the repository:
git clone https://github.com/kisbalazspatrik/responsive-carousel.git
- Change to the project directory:
cd responsive-carousel
- Install dependencies:
npm install
- Start the development server:
npm start
- Open your browser and navigate to
http://localhost:3000. The carousel should now be displayed.
To use the carousel, simply scroll using your mouse wheel or touchpad. The carousel will automatically navigate between the slides based on your scroll direction.
- Next - A framework for building React applications with advanced features
- TypeScript - A typed superset of JavaScript that compiles to plain JavaScript
This project is licensed under the MIT License - see the LICENSE file for details.