ant Desing 走马灯点击图片显示对应下标的图片

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

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

先上代码

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

//table上的点击图片事件  
lookBigImg = (item, index) => {
    this.setState({
      lookBig: true,
      images: item.images,
      imagesIndex: index,
    });
    if (this.refs.swipeBigPic) {
      this.refs.swipeBigPic.slick.innerSlider.slickGoTo(index);
    }
  };
  handleCancelLook = () => {
    this.setState({
      lookBig: false,
    });
  };

 

        

	
     
        { images && images.length > 0 ? images.map((item,index) => (
	        

	    )) : null }
	

 

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

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

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

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

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

 

 

左边分享一个公众号，写一些散文和影评等，右边的是博主自己的二维码，欢迎一起讨论。