maxmarinich / react-alice-carousel

React responsive component for building content galleries, content rotators and any React carousels
MIT License
833 stars 91 forks source link

onSlideChanged not getting called when index is 0 #9

Closed priya-unacademy closed 6 years ago

priya-unacademy commented 6 years ago

The onSlideChanged props is not getting triggered for the first counter (ie) when the index is 0, it is not getting triggered

maxmarinich commented 6 years ago

Could you provide your code sample?

priya-unacademy commented 6 years ago

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>
  );
}

}

maxmarinich commented 6 years ago

component refactoring 528f463

dpkshtc commented 3 years ago

This issue still exists. Also, I could not understand the commit link you shared. Please elaborate.

dpkshtc commented 3 years ago

it worked for me when i added touchtracking prop. not sure why though