round-carousel-component

Round Carousel

An infinitely scrollable 3D carousel component for the web

Visitor stats

Code stats

Install

First install the component using your preferred package manager:

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	<div><strong>Slide Title</strong></div>

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: `<div><strong>Round Carousel</strong><span>Slide number ${index + 1}</span></div>`
	}));

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

---

Connect with me:

                     

---

Support and sponsor my work:

Changelog

1.2.1

23 November 2022

• Update dependency webpack-cli to v5 #46
• Update dependency touchsweep to v2 #45
• [ImgBot] Optimize images #44
• Update dependency parcel to v2.8.0 1cf22d9
• Update dependencies d3f0428
• Update dependency release-it to v15.4.3 9b7efb2