React Corni Slider

Introduction

Native horizontal scrolling carousel. Allows scrolling without added animations. The configuration enables a number of configuration options.

Demo

Demo

The component

  <Slider config={config} data={data} component={Card} />

Configuration

Property	Description	Type	Default value
itemsToShow	Visible items	Number	1
itemsToSlide	Items that will slide	Number	1
gutter	Horizontal padding for each item	Number	0
showDots	Show dots for block navigation	Boolean	false
dotsStyles	Style for dots	Object
nextVisibleItemWidth	Show the a part of the next item after the number of items selected as itemsToShow. The value will be in px	Number	0
animationVelocity	Animation in ms	Number	300
responsive	It's possible to define a configuration by breakpoint. This configuration will have the previous properties	Object
showArrow	Show the arrows button. You can style	Boolean	true
arrows	Pass the component to customize each arrow: left and right	Object	< and >

Example

const config = {
  itemsToShow: 3,
  itemsToSlide: 3,
  gutter: 10,
  showDots: true,
  dotsStyles: {},
  nextVisibleItemWidth: 100,
  animationVelocity: 300,
  responsive: {
    0: {
      itemsToShow: 1,
      itemsToSlide: 1,
      gutter: 5,
      showDots: true,
      nextVisibleItemWidth: 50,
      animationVelocity: 300,
    },
    414: {
      itemsToShow: 2,
      itemsToSlide: 1,
      gutter: 5,
      showDots: true,
      nextVisibleItemWidth: 50,
      animationVelocity: 300,
    },
    767: {
      itemsToShow: 3,
      itemsToSlide: 1,
      gutter: 10,
      showDots: true,
      nextVisibleItemWidth: 75,
      animationVelocity: 500,
    },
    1024: {
      itemsToShow: 5,
      itemsToSlide: 5,
      gutter: 10,
      showDots: true,
      nextVisibleItemWidth: 100,
      animationVelocity: 500,
    },
  },
  showArrows: true,
  arrows: {
    left: <div>L</div>,
    right: <div>R</div>,
  },
  ssr: 1024,
};

Data

It is the array you need to pass to create the list of items. Each item will be an object with the properties you need to pass to your component.

Component

The component o card to show inside de carousel.

---

Available Scripts

In the project directory, you can run:

npm run build

Builds the app before publish to npm js.

npm run test

Launches the test runner in the interactive watch mode.

npm run storybook

Run storybook in 6006 port.

npm run build-storybook

Build the storybook.

npm run deploy-storybook

Deploy to Git hub pages the storybook. Previously you need to build storybook.