Handle Lazy Loading with Nuka Carousel

app.js

class PhotoCarousel extends React.Component {

	constructor() {
		super();
		this.state = {
			currentSlideIndex: 0 // track the index of the current slide
		};
		this.handleAfterSlide = this.handleAfterSlide.bind(this);
	}

	handleAfterSlide(newSlideIndex) {
		this.setState({
			currentSlideIndex: newSlideIndex
		});
	}

	render() {
		const {photos = [], isSlideshowMode = false} = this.props;

		const photosNodes = photos.map((photo, key) => {
      // this is the trick : only show the 2 next img from the current slide position
      // On mount, only the first 2 images are loaded, then each time the user go to the next slide
      // we load the next 2 images
			if (key <= this.state.currentSlideIndex + 2) {
					return <img key={ key }	src={ src }	alt={ photo.alt }/>;
			}
			return <div></div>;
		});
    
		return (
			<Carousel
				className="hero-carousel"
				ref="slideshow"
				afterSlide={ this.handleAfterSlide }
				decorators={ decorators }
			>
				{ photosNodes }
			</Carousel>
		);
	}
}

PhotoCarousel.propTypes = {
	photos: PropTypes.arrayOf(photoPropTypes),
	isSlideshowMode: PropTypes.bool
};

export default registerStyle(style)(PhotoCarousel);