Spinorama NPM | npm.io

Spinorama

Spinorama is a highly customizable and versatile carousel component for React applications, specifically designed to work seamlessly with Material-UI. With Spinorama, you can easily create stunning and interactive carousels that showcase your content in the most visually appealing way.

Installing

npm install spinorama

Note
To use Spinorama in your project, you need to have Material-UI installed. If you haven't installed it yet, you can add it to your project by running the following command:

npm install @mui/material @emotion/react @emotion/styled

Example

'use client'

import { Spinorama, SpinoramaWrapper, SpinoramaItem, SpinoramaActions, SpinoramaThumbnails, SpinoramaThumbnail, SpinoramaButtons, SpinoramaNext, SpinoramaPrev } from 'spinorama'

...

<Spinorama>
	<SpinoramaWrapper>
		<SpinoramaItem>Item 1</SpinoramaItem>
		<SpinoramaItem>Item 2</SpinoramaItem>
		<SpinoramaItem>Item 3</SpinoramaItem>
	</SpinoramaWrapper>

	<SpinoramaActions>
		<SpinoramaButtons>
			<SpinoramaPrev />
			<SpinoramaNext />
		</SpinoramaButtons>

		<SpinoramaThumbnails justify="end">
			<SpinoramaThumbnail />
			<SpinoramaThumbnail />
			<SpinoramaThumbnail />
		</SpinoramaThumbnails>
	</SpinoramaActions>
</Spinorama>

...

Customizing

Spinorama Component

You can customize the Spinorama component by passing the following props:

Prop	Default	Description
`interval`	10000	The duration of the interval between slide transitions (in milliseconds). This is the time it takes for the transition to complete.
`duration`	1000	The duration of the slide change animation (in milliseconds). This is the time it takes for the animation to complete.
`ease`	power1.inOut	The easing function to apply to the transition between slides. This can be any valid GSAP easing function

Here's an example of how to customize the Spinorama component:

<Spinorama interval={10000} duration={1000} ease="power1.inOut">

SpinoramaWrapper Component

Prop	Default	Description
`justify`	start	Determines how the slides are aligned. Available options are: `start`: aligns the slides to the left`end`: aligns the slides to the right
`reverse`	false	Determines the direction of the slideshow. When `true`, the slides will be displayed in reverse order.
`spacing`	0	Defines the space between the type `item` components. This can be any valid Spacing value.

<SpinoramaWrapper justify="start" direction={false} spacing={0}>

react react-component mui material-ui material design carousel slideshow slider typescript

@emotion/react @emotion/styled @gsap/react @mui/icons-material @mui/material @mui/system gsap react react-dom

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago