react-horizontal-slider/index.js

A horizontal menu/slider for ReactJS

import React from 'react';

import './index.css';

import 'bootstrap/dist/css/bootstrap.min.css';


import 'simplebar/dist/simplebar.min.css';

import $ from 'jquery';
import {
  Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button
} from 'reactstrap';


class HorizontalSlider extends React.Component {

  constructor(props)
    {

      super(props);

      this.state={
        data:this.props.data,
        width:this.props.width?this.props.width:"300",
        height:this.props.height?this.props.height:"320",

      }
      this.scroll = this.scroll.bind(this);

    }

    scroll(direction){

      let far = $( `.menu${this.props.id}`).width()/2*direction;
      let pos = $(`.menu${this.props.id}`).scrollLeft() + far;


      $(`.menu${this.props.id}`).animate( { scrollLeft: pos }, 800)

  


    }







  render(){
//     const Car=styled.div`
// padding:15px;
//   display:inline-block;
//   width:${this.state.width}px;
//   height:${this.state.height}px;
//   `
return (

<div className="container">
<div className="title">{`${this.props.title}`}</div>
<div className="row">

 <div className=" parent col-md-1">
    <a className={`prev2 pv${this.props.id}`} onClick={this.scroll.bind(null,-1)}>&#10094;</a>
</div>
   
    <div className={`main   menu${this.props.id} col-md-10 row`}>
    
      {this.state.data
.map((item,idx)=>(
<div  key={idx}>
  <Card style={{height:`${this.state.height}px`,width:`${this.state.width}px`,margin:'30px'}} >
    <img  style={{height:`${0.5*this.state.height}px`,width:`${this.state.width}px`}}  src={item.url} alt={`${item.title}`} />
    <CardBody style={{padding:'10px'}}>
      <CardTitle style={{ fontWeight: 'bold' }}>{item.title} {item.cost}</CardTitle>
      <CardSubtitle>{item.company}</CardSubtitle>
      <CardText key={1}>{item.desc}</CardText>
    </CardBody>
  </Card>
</div>
))}

</div>

 <div className="col-md-1">
<a  className={`next2 nt${this.props.id}`} onClick={this.scroll.bind(null,1)}>&#10095;</a>
 </div>
</div>


</div>



);
}
}

export default HorizontalSlider;