https://github.com/nerdyman/react-image-turntable
Display a set of images as a draggable 360 degree turntable.
https://github.com/nerdyman/react-image-turntable
360 component hacktoberfest image react rotator slider turntable
Last synced: 5 months ago
JSON representation
Display a set of images as a draggable 360 degree turntable.
- Host: GitHub
- URL: https://github.com/nerdyman/react-image-turntable
- Owner: nerdyman
- License: mit
- Created: 2022-01-14T16:37:59.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-17T11:37:18.000Z (over 1 year ago)
- Last Synced: 2025-08-05T13:47:43.435Z (10 months ago)
- Topics: 360, component, hacktoberfest, image, react, rotator, slider, turntable
- Language: TypeScript
- Homepage: https://stackblitz.com/github/nerdyman/react-image-turntable/tree/main/example
- Size: 745 KB
- Stars: 32
- Watchers: 2
- Forks: 4
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Image Turntable
Display a set of images as a draggable 360 degree turntable.
[](https://codesandbox.io/s/github/nerdyman/react-image-turntable/tree/main/example?file=/src/App.tsx:5537-5598)
### [👉  Try the demo  👈](https://codesandbox.io/s/github/nerdyman/react-image-turntable/tree/main/example?file=/src/App.tsx:5537-5598)
## Features
- Accessible
- Responsive & fluid with intrinsic sizing
- Supports keyboard navigation
- Teeny Tiny (less than 1kb gzipped)
- Zero dependencies
- Type safe
## Install
```sh
npm i react-image-turntable
# Or
yarn add react-image-turntable
# Or
pnpm i react-image-turntable
```
## Usage
### Props
| Props | Type | Required | Default Value | Description |
| --------------------- | :--------- | :------: | :------------ | :--------------------------------------------------------------------------- |
| `images` | `string[]` | ✓ | `undefined` | List of image `src` attributes. |
| `initialImageIndex` | `number` | | `0` | Index of image to show first. |
| `movementSensitivity` | `number` | | `20` | The amount a "drag" has to move before an image changes to next or previous. |
### Example
```ts
import React from 'react';
import { ReactImageTurntable } from 'react-image-turntable';
const images = [
'https://via.placeholder.com/1200x800?text=1',
'https://via.placeholder.com/1200x800?text=2',
'https://via.placeholder.com/1200x800?text=3',
];
export const Turntable = () => ;
```
Also see the [example code](./example) in the repo.
### Custom Styling
The library uses the first image passed to intrinsically size the component, it also exports following
`className`s to apply custom styles when needed.
| `className` | Purpose |
| :------------------------- | :------------------------------------------------------------------- |
| `CLASS_NAME_IMG` | Base class for images. |
| `CLASS_NAME_IMG_PRIMARY` | Class of first rendered image (sets the size of the main component). |
| `CLASS_NAME_IMG_SECONDARY` | Class of subsequent images. |
---
## Contributing
See the [contributing guide](./CONTRIBUTING.md) to get started.
---
## Browser Support
The library is built for `ES2021`.
## Notes
- It's recommended you use a minimum of 24-36 for a smooth experience
- Legacy [v2.5.4 Demo](https://codesandbox.io/s/react-image-turntable-riy93)
- Original version by [@andrewmcoupe](https://github.com/andrewmcoupe)