Round Carousel

> An infinitely scrollable 3D carousel component for the web

!Demo

Visitor stats

!GitHub stars
!GitHub forks
!GitHub watchers
!GitHub followers

Code stats

!GitHub code size in bytes
!GitHub repo size
!GitHub language count
!GitHub top language
!GitHub last commit

Install

First install the component using your preferred package manager:

``sh
npm i round-carousel-component

or

yarn add round-carousel-component
`

Usage

Then import the component in your application. Here is an example:

The slides (or items) should have the following shape:

| Prop | Type | Required | Description | Example |
| --------- | -------- | -------- | ---------------------------------------------------- | -------------------------------------------- |
| alt | string | false | Alternative text for the slide image | 'This is an example alt text' |
| image | string | true | Path or URL to an image | 'https://source.unsplash.com/random/210x210' |
| content | string | true | An HTML string representing the content of the slide |

`typescript
import { RoundCarousel, RoundCarouselItem } from 'round-carousel-component';

const node = document.getElementById('carousel');

// Create an array of Carousel Items
const items: RoundCarouselItem[] = Array(20)
.fill('')
.map((_, index) => ({
alt: 'A random Unsplash photo',
image: https://picsum.photos/${210 + index},
content:

new RoundCarousel(node, {
items
});
`

Options

The component accepts the following configuration options as props:

| Prop | Type | Required | Description | Default |
| ------------------- | ------------------- | -------- | ----------------------------------- | ---------- |
| items | RoundCarouselItem | true | An array of RoundCarouselItems | [] |
| itemWidth | number | false | Width of each of the carousel items | 210 |
| nextButtonContent | string | false | Content of the next button | 'Next' |
| prevButtonContent | string | false | Content of the previous button | 'Previous' |
| showControls | boolean` | false | Show/hide navigation controls | true |

LICENSE

MIT

---

 



 



 



 



 



 



 



 



 



 



 

---

Support and sponsor my work: