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. |