I have an Image slider{Carousel} that has its own texts and the texts is sliding in from left and right. I accomplished this by adding each effect in the state using if statement inside interval but the code is really long and there has to be a way to make this with less code. thanx in advance.
State
constructor(props) {
super(props);
this.state = {
width: 0,
animateLeftOne: "",
animateLeftTwo: "",
animateLeftThree: "",
animateLeftFour: "",
animateLeftFive: "",
animateLeftSix: "",
animateLeftSeven: "",
animateLeftEight: "",
animateLeftNine: "",
animateRightOne: "",
animateRightTwo: "",
animateRightThree: "",
animateRightFour: "",
animateRightFive: "",
animateRightSix: "",
animateRightSeven: "",
animateRightEight: "",
animateRightNine: ""
};
}
ComponentDidMount
componentDidMount() {
this.sliderwidth();
this.showAnime();
const wow = new WOW();
wow.init();
}
Method
showAnime = () => {
let counter = 0;
setInterval(() => {
counter++;
if (counter === 0) {
this.setState({
animateLeftOne: "animated fadeInLeftBig delay-one",
animateRightOne: "animated fadeInRightBig delay-one"
});
} else if (counter === 1) {
this.setState({
animateLeftTwo: "animated fadeInLeftBig delay-two",
animateRightTwo: "animated fadeInRightBig delay-two"
});
} else if (counter === 2) {
this.setState({
animateLeftThree: "animated fadeInLeftBig delay-three",
animateRightThree: "animated fadeInRightBig delay-three"
});
} else if (counter === 3) {
this.setState({
animateLeftFour: "animated fadeInLeftBig delay-four",
animateRightFour: "animated fadeInRightBig delay-four"
});
} else if (counter === 4) {
this.setState({
animateLeftFive: "animated fadeInLeftBig delay-five",
animateRightFive: "animated fadeInRightBig delay-five"
});
} else if (counter === 5) {
this.setState({
animateLeftSix: "animated fadeInLeftBig delay-six",
animateRightSix: "animated fadeInRightBig delay-six"
});
} else if (counter === 6) {
this.setState({
animateLeftSeven: "animated fadeInLeftBig delay-seven",
animateRightSeven: "animated fadeInRightBig delay-seven"
});
} else if (counter === 7) {
this.setState({
animateLeftEight: "animated fadeInLeftBig delay-eight",
animateRightEight: "animated fadeInRightBig delay-eight"
});
} else if (counter === 8) {
this.setState({
animateLeftNine: "animated fadeInLeftBig delay-nine",
animateRightNine: "animated fadeInRightBig delay-nine"
});
} else if (counter === 9) {
counter = 0;
this.setState({
animateLeftOne: "",
animateLeftTwo: "",
animateLeftThree: "",
animateLeftFour: "",
animateLeftFive: "",
animateLeftSix: "",
animateLeftSeven: "",
animateLeftEight: "",
animateLeftNine: "",
animateRightOne: "",
animateRightTwo: "",
animateRightThree: "",
animateRightFour: "",
animateRightFive: "",
animateRightSix: "",
animateRightSeven: "",
animateRightEight: "",
animateRightNine: ""
});
}
}, 7000);
};
Aucun commentaire:
Enregistrer un commentaire