react-carousel

Horizontal infinite scroll container

Table of Contents

• Features
• Install
• Example
• API
• License

Features

• Display element in an horizontal carousel
• Use custom buttons to slide the elements
• Mobile support for scroll
• Use predefined themes for side buttons
• Responsive horizontal slider

Install

Using npm :

npm install  @marchintosh94/react-carousel

Using yarn :

yarn add @marchintosh94/react-carousel

  import { ReactCarouselSlider } from "@marchintosh94/react-carousel"
  import "@marchintosh94/react-carousel/dist/index.css"

Example

See a complete Demo.

Display 5 boxes in react carosel

In this example we are going to use fontawesome) icons for the "previous" and "next" buttons, but you can use your favourite icon sets:

  const prevIcon = (
    <i className="far fa-chevron-left"></i>
  )

  const nextIcon = (
    <i className="far fa-chevron-right"></i>
  )

Then define the boxes that will be displayed in react carousel

  const boxesStyle: React.CSSProperties = {
    height: "250px", 
    width: "400px", 
    border: ".5px solid rgba(0, 0, 0, .4)", 
    borderRadius: "5px"
  }

  const boxes: React.ReactNode = (
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
  )

Display react carousel

  return (

    <ReactCarouselSlider 
      itemsHeight={boxesStyle.height} 
      itemsWidth={boxesStyle.width} 
      elementsMargin={10} //in px
      prevIcon={prevIcon}
      nextIcon={nextIcon}>

      {boxes}

    </ReactCarouselSlider>
  )

Complete example

import React from 'react'

import { ReactCarouselSlider } from 'react-carousel'
import 'react-carousel/dist/index.css'

const MyComponent: React.FC = () => {

  const boxesStyle: React.CSSProperties = {
    height: "250px", 
    width: "400px", 
    border: ".5px solid rgba(0, 0, 0, .4)", 
    borderRadius: "5px"
  }

  const boxes: React.ReactNode = (
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
    <div style={boxesStyle}></div>
  )

  const prevIcon = (
    <i className="far fa-chevron-left"></i>
  )

  const nextIcon = (
    <i className="far fa-chevron-right"></i>
  )

  return (
    <ReactCarouselSlider 
      itemsHeight={boxesStyle.height} 
      itemsWidth={boxesStyle.width} 
      elementsMargin={10} 
      prevIcon={prevIcon}
      nextIcon={nextIcon}>

      {boxes}

     </ReactCarouselSlider>
  )
}

API

Properties ReactCarouselSlider

| Name | Type | Description | | --------------- | ----------- | ----------- | | itemsHeight | number | this property sets the height of container (in px) | | itemsWidth | number | this property is used to calculate the container's width (in px) | | elementsMargin | number | this property represent the margin (in px) between each element in the carousel | | prevIcon | React.ReactNode | the element used to slide the carousel to the left | | nextIcon | React.ReactNode | the element used to slide the carousel to the right | | theme | 'light' | 'dark' | '' | default themes for the slider buttons |

License

MIT © marchintosh