6

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

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被识别为 swiper 对象的反应属性。

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

slidesSizesGrid: (11) [1005.86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

任何帮助，将不胜感激。我也不太明白“虚拟”是什么意思。

4

1 回答 1

-1 
.swiper-slide {
    width: auto!important;
}
于 2021-03-24T10:53:04.413 回答