Complete an image carousel component using React

This time I will bring you how to use React to complete a picture carousel component. What are the notes of using React to complete a picture carousel component? The following is a practical case. Get up and take a look.

Use React to implement the above functions. First, divide the components:

<SlideMS> <SlideM/>
 <SlideS/><SlideMS/>

The component SlideM represents the middle picture component, which always maintains a state: currentMIndex, which is the index value of the current Chinese image.
The component SlideS represents the small picture component and needs to maintain two states: currentSIndex and currentSPage, that is, the index value of the current small picture image and the current page number of the small picture;

The outer component SlideMS accepts several Parameters as props:

<SlideMS     mediumImageArr={mediumImageArr}    eachMediumImgWidth = {616}    smallImageArr={smallImageArr}     eachSmallImgWidth = {82}/>, document.getElementById(&#39;js-img-slide&#39;));
SlideM、SlideS再从SlideMS中获取参数进行内部渲染。
<SlideM     mediumImageArr={mediumImageArr}    currentMIndex={currentMIndex}    eachMediumImgWidth = {eachMediumImgWidth}    callback={(index)=>{self.setSmallIndex(index)}} /><SlideS      smallImageArr={smallImageArr}      currentSIndex={currentSIndex}      eachSmallImgWidth={eachSmallImgWidth}      eachMediumImgWidth = {eachMediumImgWidth}      callback={(index)=>{self.setMediumIndex(index)}}/>

When the switch button of the middle image is clicked, the image offset is calculated, and then the new currentMIndex is passed to the parent component. The parent component setState notifies the two child components of the currentMIndex. Changes have occurred;

There are many calculations involved in the small picture component, and these can be divided into methods, such as: calculating how many small pictures there are on a page based on the given width of the middle picture, calculating the total number of small picture pages, Determine which page the thumbnail is on based on the given index value.

When you click the left and right arrows of the small picture component, calculate the offset of the picture (first calculate how many small pictures there are in a medium picture), and then setState modifies the value of the currentSPage of the small picture. The parent component setState notifies the two sub-components that the currentMIndex has changed;

After the medium picture and small picture components received the new value changes in componentWillReceiveProps respectively, they setState again and updated the state inside the component, thus realizing the two communication between persons.

The above is an idea for implementation. In actual applications, the scene will be more complicated. For example, the first picture may need to play a video, and when the middle picture is clicked, it can be switched to the large picture mode. In the large picture mode, the carousel can be normal, and in When the large picture mode is turned off, the medium picture and small picture will automatically locate the last picture viewed just now. This will involve slightly more complex operations, and compatibility needs to be done on this basis.

A very embarrassing point: the animation effect during image carousel still uses jquery’s animate.

The above is the detailed content of Complete an image carousel component using React. For more information, please follow other related articles on the PHP Chinese website!