https://github.com/scriptex/round-carousel-component

An infinitely scrollable 3D carousel component
https://github.com/scriptex/round-carousel-component

carousel carousel-component carousel-plugin carousel-slider

Last synced: 4 months ago
JSON representation

An infinitely scrollable 3D carousel component

• Host: GitHub
• URL: https://github.com/scriptex/round-carousel-component
• Owner: scriptex
• License: mit
• Created: 2021-11-01T08:22:17.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2025-03-10T04:29:13.000Z (4 months ago)
• Last Synced: 2025-03-18T21:22:00.963Z (4 months ago)
• Topics: carousel, carousel-component, carousel-plugin, carousel-slider
• Language: TypeScript
• Homepage: https://round-carousel-component.atanas.info/
• Size: 4.28 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Github Build](https://github.com/scriptex/round-carousel-component/workflows/Build/badge.svg)](https://github.com/scriptex/round-carousel-component/actions?query=workflow%3ABuild)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/round-carousel-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/round-carousel-component&utm_campaign=Badge_Grade)

[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-round-carousel-component-master)

[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/round-carousel-component/badge)](https://www.codefactor.io/repository/github/scriptex/round-carousel-component)

[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)

[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/round-carousel-component/README.md?pixel)](https://github.com/scriptex/round-carousel-component/)

# Round Carousel

> An infinitely scrollable 3D carousel component for the web

![Demo](https://raw.githubusercontent.com/scriptex/round-carousel-component/master/demo/demo.png)

## Visitor stats

![GitHub stars](https://img.shields.io/github/stars/scriptex/round-carousel-component?style=social)

![GitHub forks](https://img.shields.io/github/forks/scriptex/round-carousel-component?style=social)

![GitHub watchers](https://img.shields.io/github/watchers/scriptex/round-carousel-component?style=social)

![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)

## Code stats

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/round-carousel-component)

![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/round-carousel-component?style=plastic)

![GitHub language count](https://img.shields.io/github/languages/count/scriptex/round-carousel-component?style=plastic)

![GitHub top language](https://img.shields.io/github/languages/top/scriptex/round-carousel-component?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/round-carousel-component?style=plastic)

## 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 | `
Slide Title
`    |


```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: `


Round CarouselSlide number ${index + 1}

`

	}));


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 `RoundCarouselItem`s    | []         |

| `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: