javascript - how to animate image in react when image change after some interval? - Stack Overflow

I am trying to make a image slider in react in which a image is change after 5000 second. I checked from here / .where this website implement that functionality . I tried to implement same this in react .I am able to make that , but my image is not slide(from right to left) in other words image not showing animation when second image show n view here is my code

 constructor(){
    super();
    this.pre=this.pre.bind(this);
     this.next=this.next.bind(this);
    this.state ={
      currentSlide :0
    }
     setInterval(()=>{
       var current = this.state.currentSlide;
    var next = current + 1;
    if (next > this.props.stories.items.length - 1) {
      next = 0;
    }
          this.setState({ currentSlide: next });

     }, 5000);


  }

I am trying to make a image slider in react in which a image is change after 5000 second. I checked from here http://mumbaimirror.indiatimes./ .where this website implement that functionality . I tried to implement same this in react .I am able to make that , but my image is not slide(from right to left) in other words image not showing animation when second image show n view here is my code https://codesandbox.io/s/YrO0LvAA

 constructor(){
    super();
    this.pre=this.pre.bind(this);
     this.next=this.next.bind(this);
    this.state ={
      currentSlide :0
    }
     setInterval(()=>{
       var current = this.state.currentSlide;
    var next = current + 1;
    if (next > this.props.stories.items.length - 1) {
      next = 0;
    }
          this.setState({ currentSlide: next });

     }, 5000);


  }

• javascript
• reactjs
• react-native
• redux
• react-router

Share Improve this question Follow asked Jul 23, 2017 at 3:32 user5711656user5711656 3,68866 gold badges4343 silver badges8181 bronze badges 1

• Do you want to do this with react-native or react-dom (which is for html). With react-native you should have a look into it's Animated ponents. – Jan Peter Commented Jul 23, 2017 at 13:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

One way to do this is to always have the future image (next image) be ready on the right side so you can transition it to the left, at the same time you transition the current one to the left. So they both move together.

In React this would mean that you would need to store the Index of both the current image and your next image, and each X seconds you need to move them both to the left (or the right depending on your action)

Here's a proof of concept:

https://codepen.io/nashio/pen/xLKepZ

const pics = [
  'https://cdn.pixabay./photo/2017/06/19/07/12/water-lily-2418339__480.jpg',
  'https://cdn.pixabay./photo/2017/07/18/18/24/dove-2516641__480.jpg',
  'https://cdn.pixabay./photo/2017/07/14/17/44/frog-2504507__480.jpg',
  'https://cdn.pixabay./photo/2016/09/04/13/08/bread-1643951__480.jpg',
];

class App extends React.Component {
  constructor(props) {
    super(props);
    const idxStart = 0;
    this.state = {
      index: idxStart,
      next: this.getNextIndex(idxStart),
      move: false,
    };
  }

  getNextIndex(idx) {
    if (idx >= pics.length - 1) {
      return 0;
    }
    return idx + 1;
  }

  setIndexes(idx) {
    this.setState({
      index: idx,
      next: this.getNextIndex(idx)
    });
  }

  ponentDidMount() {        
    setInterval(() => {
      // on
      this.setState({
        move: true
      });
      // off
      setTimeout(() => {
        this.setState({
          move: false
        });
        this.setIndexes(this.getNextIndex(this.state.index));
      }, 500); // same delay as in the css transition here

    }, 2000); // next slide delay
  }
  render() {
    const move = this.state.move ? 'move' : '';
    if (this.state.move) {

    }
    return (
      <div className="mask">
        <div className="pic-wrapper">
          <div className={`current pic ${move}`}>
            {this.state.index}
            <img src={pics[this.state.index]} alt="" />
          </div>
          <div className={`next pic ${move}`}>
            {this.state.next}
            <img src={pics[this.state.next]} alt="" />
          </div>
        </div>
      </div>
    );
  }
}

React.render(<App />, document.getElementById('root'));


// CSS

.pic {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  img {
    width: 100px;
    height: 100px;
  }
}

.current {
  left: 100px;
}

.current.move {
  left: 0;
  transition: all .5s ease;
}

.next {
  left: 200px;
}

.next.move {
  left: 100px;
  transition: all .5s ease;
}

.pic-wrapper {
  background: lightgray;
  left: -100px;
  position: absolute;

}

.mask {
  left: 50px;
  overflow: hidden;
  width: 100px;
  height: 120px;
  position: absolute;
}

EDIT: Updated the POC a bit to handle left and right navigation, see full thing HERE

This is by no means an elegant solution, but it does slide the image in from the left when it first appears: https://codesandbox.io/s/xWyEN9Yz

I think that the issue you're having is because you are only rendering the current story, but much of your code seemed to assume that there would be a rolling carousel of stories which you could animate along, like a reel.

With the rolling carousel approach it would be as simple as animating the left CSS property, and adjusting this based on the currently visible story. I.e. maintain some state in your ponent which is the current index, and then set the 'left' style property of your stories container to a multiple of that index. E.g:

const getLeftForIndex = index => ((index*325) + 'px');

<div className="ImageSlider" style={{ left: getLeftForIndex(currentStory) }}>
  <Stories />
</div>