https://github.com/andraxdev/material-carousel-react
https://github.com/andraxdev/material-carousel-react
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/andraxdev/material-carousel-react
- Owner: AndraxDev
- Created: 2024-09-10T21:14:22.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-14T16:55:56.000Z (almost 2 years ago)
- Last Synced: 2025-01-18T16:54:20.671Z (over 1 year ago)
- Language: JavaScript
- Size: 5.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Material Carousel
This is the example of Material 3 Carousel using ReactJS.
## Demo
View demo at [https://carousel.andrax.dev/](https://carousel.andrax.dev/)
## Requirements
```bash
npm install react-device-detect@2.2.3
```
> [!NOTE]
>
> However, you can use this component without `react-device-detect` package, but scrolling on mobile devices will not work without it.
## Usage
```js
```
Where `urls` is an array of image URLs and `supportSnap` is a boolean value that enables snapping to the closest item.
## How it was created
Width of all elements is calculated dynamically based on the scroll width using the following formula:
Where x is scroll width + item offset. Each new item has offset of 110px. Scroll width is a virtual parameter as carousel elements only changes their width to simulate scrolling effect.
## License
```
Copyright (c) 2024 Dmytro Ostapenko. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```