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