round-carousel-component

Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

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:

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:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image