1.1.1 • Published 4 years ago

react-horizontal-slider v1.1.1

Weekly downloads
173
License
ISC
Repository
github
Last release
4 years ago

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

PropsTypeDefaultRequiredDescription
heightNumber300NoThe height of each induvidual Card in the menu
widthNumber320NoThe width of each induvidual Card in the menu
idStringNAYesWhen multiple sliders are used each should have a unique id
titleStringNoneNoThe title of a particular Slider.
dataObjectNAYesThe data to be displayed in the slider in the form of a Javascript object array.

Format of Data

KeyRequiredDescription
urlYesThe url of the image to be displayed.
titleYesThe title of the image.
costNoA cost of a particular item(for e-commerce type apps).
companyNoCompany a particular item is related to.
descNoDescription of the image.