https://github.com/jl-/flat-carousel

React carousel component
https://github.com/jl-/flat-carousel

carousel carousel-component hook react reactjs swiper

Last synced: 3 days ago
JSON representation

React carousel component

• Host: GitHub
• URL: https://github.com/jl-/flat-carousel
• Owner: jl-
• Created: 2019-11-11T11:45:54.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-28T03:48:43.000Z (almost 5 years ago)
• Last Synced: 2024-08-02T19:34:57.605Z (3 months ago)
• Topics: carousel, carousel-component, hook, react, reactjs, swiper
• Language: TypeScript
• Homepage:
• Size: 8.79 KB
• Stars: 14
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-components - flat-carousel - [demo](https://671g5.csb.app/) Light weight carousel component for general purpose. (UI Components / Carousel)

README

        

## FlatCarousel

> a tiny carousel component for react.

## [Demo](https://codesandbox.io/s/jolly-fog-671g5?fontsize=14)

## Features

- no dependency

- support autoplay

- support touch and mouse device

- transition done with raf and tweening.

- infinite loop without duplicating the first&last item

## Demo

```javascript

import Carousel from 'flat-carousel';

const images = [

    { src: 'some image' }

];

const MyCarousel = () => (

    

        {images.map((image, index) => (

            


        ))}

    

);

```


## Props

- `initialIndex?`: number, defaults to 0

- `transitionDuration?`: number, defaults to 400ms

- `autoplay?`: boolean, defaults to true

- `autoplayInterval?`: number, defaults to 3000ms

- `infiniteLoop?`: boolean, defaults to true

- `onPageChange?(index: number)`: void;