在我们使用走马灯这个组件时，会遇到点击图片组第三张却显示第一张的问题。 

在我们技术大佬的教学下，我知道了其实Carousel组件是有内置的API方法 配合去解决这个问题的。

先上代码

imagesIndex 是我点击图片数组的下标，也就是点击的第几张图片。 首先我们的this.refs初始是空的，所以要配合initialSlide去使用，然后完美的解决了这个问题。

	lookBigImg = (item,index) => {
		this.setState({
			lookBig: true,
			images: item.images,
			imagesIndex:index
		});
		if(this.refs.swipeBigPic){
			this.refs.swipeBigPic.slick.innerSlider.slickGoTo(index);
		}
	}

<Modal 
    visible = {lookBig}
    footer = {null}
    onCancel = {this.handleCancelLook}
    zIndex={99999999}
    style={{minWidth:'600px'}}
>	
    <Carousel afterChange={this.carouselChange} ref="swipeBigPic" initialSlide={imagesIndex}> 
        { images && images.length > 0 ? images.map((item,index) => (
	        <div key={index}><img src={item} width="100%" key={index}/></div>
	    )) : null }
	</Carousel>
</Modal>

1.我们在中文官方文档下面会看到一个url链接，点进去。意思是还有此组件更多的功能让你参考，中文文档只是写出来一部分。

2.找到Documentation点进去 ，意思是文档的意思

3.找到右上角 Docs, 点进去

扫描二维码关注公众号，回复： 3785873 查看本文章

4.找到右侧的API，这里就是走马灯组件的其他API了，那么哪个是我们需要的API呢？

5.就是  initialSlide 了， 意思是你第一次点进去是第几张图片，再配合slickGoTo方法就完美解决了

最后分享一个公众号二维码，写一些散文和影评等，欢迎关注。