dispatchSelectedCarouselIndex() {
console.log(this.props.index);
this.props.dispatch({type: 'videoRoute', selectedCarouselIndex: this.props.index});
}
extendFunctionality(e) {
e.preventDefault();
this.dispatchSelectedCarouselIndex();
this.props.onClick(e);
}
render() {
const styles = require('./LeftArrow.scss');
return (
<div {...this.props} className={styles.btn}><span className={styles.text}>Prev</span>
<button className={styles.btn + ' slick-prev'} component={'DIV'} onClick={this.extendFunctionality} ></button>
</div>
);
}
}
LeftArrow.propTypes = {
locales: React.PropTypes.object,
dispatch: React.PropTypes.func,
index: React.PropTypes.number,
onClick: React.PropTypes.func
};
const translatedLeftArrow = translate(['app'])(LeftArrow);
export default connect(mapStateToProps)(translatedLeftArrow);
{ breakpoint: 1024, settings: { slidesToShow: 5 } }
],
afterChange: () => {this.highlightCenteredItem();},
beforeChange: () => {},
nextArrow: NextArrow,
prevArrow: PrevArrow
};
return (
<div className={styles.root} >
<Slider ref={this.props.ref} key={this.props.ref} {...settings} >
{this.props.videoIds.map(this.renderVideoId)}
</Slider>
</div>
);
}
}
Carousel.propTypes = {
locales: PropTypes.object,
dispatch: PropTypes.func,
videoIds: PropTypes.arrayOf(
PropTypes.object
).isRequired,
ref: PropTypes.string,
index: PropTypes.number,
selectedCarouselIndex: PropTypes.number
};
const translatedCarousel = translate(['app'])(Carousel);
export default connect(mapStateToProps)(translatedCarousel);