react-horizontal-slider

This is a horizontal slider-menu component for ReactJS where each item in the menu is a Card with image and a caption.

Installation

Using NPM:

$ npm install react-horizontal-slider --save

Using yarn

$ yarn add react-horizontal-slider

Demo

You can find the Demo here.

Usage

 import HorizontalSlider from 'react-horizontal-slider'
 export default class App extends React.Component {
  //other logic
    render() {
     return(
      <HorizontalSlider
         title="Menu 1"
         data={items1}
         height={300}
         width={300}
         id={1} 
         />
     //You can add Multiple Sliders if you want    
    <HorizontalSlider
         title="Menu 2"
         data={items2}
         height={400}
         width={350}
         id={2} 
         />
     );
    }
 }

Props

Props	Type	Default	Required	Description
height	Number	300	No	The height of each induvidual Card in the menu
width	Number	320	No	The width of each induvidual Card in the menu
id	String	NA	Yes	When multiple sliders are used each should have a unique id
title	String	None	No	The title of a particular Slider.
data	Object	NA	Yes	The data to be displayed in the slider in the form of a Javascript object array.

Format of Data

Key	Required	Description
url	Yes	The url of the image to be displayed.
title	Yes	The title of the image.
cost	No	A cost of a particular item(for e-commerce type apps).
company	No	Company a particular item is related to.
desc	No	Description of the image.