Closed priya-unacademy closed 6 years ago
Could you provide your code sample?
var style = require('./react-alice-carousel.scss');
export default class SimpleSlider extends React.Component { constructor(props) { super(props); this.state = { currentIndex: 0, items: this.props.items || [], }; }
slideTo = (i) => this.setState({ currentIndex: i });
onSlideChanged = (e) => this.setState({ currentIndex: e.item });
slideNext = () => this.setState({ currentIndex: this.state.currentIndex + 1 });
slidePrev = () => this.setState({ currentIndex: this.state.currentIndex - 1 });
renderSlider() {
const { currentIndex, items } = this.state;
const responsive = {
1400: {
items: 5
}
};
return (
<AliceCarousel
dotsDisabled={true}
buttonsDisabled={true}
responsive={responsive}
slideToIndex={currentIndex}
infinite={false}
onSlideChanged={this.onSlideChanged}
>
{
items.map((item, i) =>
<div className={style.sliderContent}>
<A to={item.relativeLink}>
<p className={style.lineOne}>{item.name}</p>
{item.parentName && <p style={style.lineTwo}>{item.parentName}</p>}
</A>
</div>
)}
</AliceCarousel>
);
}
render() {
return (
<Flex className={style.sliderParent}>
{
this.state.currentIndex != 0 &&
<div className={style.slidePrev} onClick={() => this.slidePrev()}>
<FontIcon value="keyboard_arrow_left"/>
</div>
}
{ this.renderSlider() }
{
(this.state.items.length > 5) && (this.state.items.length != this.state.currentIndex) &&
<div className={style.slideNext} onClick={() => this.slideNext()}>
<FontIcon value="keyboard_arrow_right"/>
</div>
}
</Flex>
);
}
}
component refactoring 528f463
This issue still exists. Also, I could not understand the commit link you shared. Please elaborate.
it worked for me when i added touchtracking prop. not sure why though
The onSlideChanged props is not getting triggered for the first counter (ie) when the index is 0, it is not getting triggered