zeroskullx / react-zerok-carousel

🚨 Upgrade Notice: New Version Available! 🚨

🚀 We've just released a major update to our package, introducing enhancements and additional features. Please note that this version is not compatible with the previous one, as significant changes have been made to the codebase.

npm i next-elastic-carousel

or

yarn add next-elastic-carousel

or

pnpm add next-elastic-carousel

🔶 Beta Alert: This is a beta release and requires further testing to ensure stability and compatibility.

🔗 NPM 🔗 New releases

react-zerok-carousel (This package has been discontinued)

The react-zerok-carousel is a clone of react-elastic-carousel. The development of this clone was necessary to implement some adjustments in typing.

A flexible and responsive carousel component for react

Why do we need yet another carousel component

• Element resize support (true responsiveness) Most of the carousel components are responsive to the viewport size, but this is not a real responsive support as we can have an element with a width:500px on a 1200px screen, most carousel component will "think" we are on a 1200px mode because they "watch" the view-port's size and not the wrapping element's size. This is the reason why react-eleastic-carousel is using the resize-observer which gives us a true responsive support, not matter on what screen size we are.

• RTL (right-to-left) support Supporting right-to-left languages requires a full support for right-to-left rendering and animations which is not supported in most of the carousel components out there. also, right-to-left support is important and should be a standard for most applications.

Live react-elastic-carousel Demos & Docs

Install

...

or

...

Note

react-zerok-carousel is using styled-components for styling, this means that you should install it as well:

...

Usage

import React, { Component } from 'react';
import Carousel from 'react-zerok-carousel';

class App extends Component {
  state = {
    items: [
      {id: 1, title: 'item #1'},
      {id: 2, title: 'item #2'},
      {id: 3, title: 'item #3'},
      {id: 4, title: 'item #4'},
      {id: 5, title: 'item #5'}
    ]
  }

  render () {
    const { items } = this.state;
    return (
      <Carousel>
        {items.map(item => <div key={item.id}>{item.title}</div>)}
      </Carousel>
    )
  }
}

Playground

Development

git clone https://github.com/zeroskullx/react-zerok-carousel.git
cd react-zerok-carousel
yarn

To run the docs site run

yarn start

to run a demo Application run

yarn demo

The application is running at http://localhost:8888

License

MIT © sag1v

UPDATE zeroksullx