1. Get pictures from the background and display the page in rotation.

The results are as follows:The code is as follows:

<Carousel autoplay={true} infinite={true}>
          {this.state.aSwiper && this.state.aSwiper.length
            ? this.state.aSwiper.map((item, index) => (
                <div key={index} className={Css["swiper-wrap"]}>
                  <img src={item} alt="" />
                </div>
              ))
            : ""}
        </Carousel>
Copy the code

Cause: The data was obtained from the background, and aSwiper was empty when Carousel was initialized. Therefore, the null judgment was placed outside Carousel to ensure that aSwiper was not empty before Carousel was initialized. The modified code is as follows:

{this.state.aSwiper && this.state.aSwiper.length ? ( <Carousel autoplay={true} infinite={true}> {this.state.aSwiper.map((item, index) => ( <div key={index} className={Css["swiper-wrap"]}> <img src={item} alt="" /> </div> ))} </Carousel> ) : (" ")}Copy the code

2. When aSwiper has only one item, the display effect is the same as that of problem 1, and no solution has been found

3 The following error occurs when you use the mouse to switch between images in Chrome:

The online solution is to set the global touch-action Settings as follows:

*{ touch-action: none; // or pan-y}Copy the code

I tried it, I still got an error, and I continued to explore