如何使用Swiper Reactjs使用动态内容制作每个视图的自动幻灯片

如何解决如何使用Swiper Reactjs使用动态内容制作每个视图的自动幻灯片

我正在尝试使用Swiper在我的React Gallery中显示数据库中的图像。特别是，我希望每个视图都有居中+自动幻灯片。调整窗口大小后， 画廊可以正常工作。这是我组件的渲染功能。

imgs = function(this.state);
return (
        <Swiper className="carousel"
            ref={this.swiperRef}
            spaceBetween={10}
            slidesPerView="auto"
            centeredSlides
            navigation
            onSlideChange={this.onSlideChange}>

            {imgs.map((img,i) => (
                <SwiperSlide key={i}>
                    <figure className={"fig fig_"+i}>
                        <img src={img.img} alt={"img_"+i} className="img"/>
                    </figure>
                </SwiperSlide>
            ))}

        </Swiper>
    );

根据状态计算变量imgs并动态更改。每次imgs都会发生变化时，我也会呼叫this.swiperRef.current.swiper.update()，但这似乎无济于事：

this.setState({
    ...
},() => {
    this.swiperRef.current.swiper.update();
    this.log("swiperRef",this.swiperRef.current.swiper);
});

这篇文章：Swiper slider not working unless page is resized没有帮助，因为observer，observeParents和observeSlideChildren都不被认为是刷卡对象的反应属性。

我认为问题出在update()调用发生在图像渲染之前，因此假定其宽度为零，如在update()之后记录滑动记录时可以看到的那样：>

slidesSizesGrid: (11) [1005.86,0]

任何帮助将不胜感激。另外，我不太了解“虚拟”的含义。

解决方法

.swiper-slide {
    width: auto!important;
}