我正在 React 中创建一个新应用程序。我想对横幅使用 swiper 滑块。 横幅将从 API 中获取。一旦到达最后一张幻灯片,如何将幻灯片附加到 swiper。我正在使用 onReachEnd 函数来触发 api 调用。不确定如何动态附加幻灯片。
export const HeroSlider = () => {
const [pageNumber, setCurrentPageNumber ] = useState(0)
const { homeBannerData, isLoading, error } = useBannerData(pageNumber)
var dataHomeBanner = []
if (homeBannerData && homeBannerData.result) {
dataHomeBanner = dataHomeBanner.concat(homeBannerData.result.data)
}
function fetchBannerData() {
setCurrentPageNumber(pageNumber+1)
if (homeBannerData && homeBannerData.result) {
dataHomeBanner = dataHomeBanner.concat(homeBannerData.result.data)
}
}
return (
/* Hero Banner Start */
<section className="hero-slider">
<Swiper
slidesPerView={1}
watchSlidesVisibility = {true}
navigation
onReachEnd={() => fetchBannerData()}
autoHeight = {true}
>
{dataHomeBanner && dataHomeBanner.map((slide, index)=>{
return (
<SwiperSlide key={index}>
<img src={slide.image alt={slide.title} className="w-100"/>
<Container>
<div className="hero-slider-body d-flex align-items-end align-items-md-center">
<Row>
<Col md={12}>
<div className="hero-slider-caption">
<h1>{slide.title}</h1>
<p>{slide.description}</p>
</div>
</Col>
</Row>
</div>
</Container>
</SwiperSlide>
)
})}
</Swiper>
</section>
/* Hero Banner End */
)
}
useBannerData 正在返回横幅数据。 现在,此代码正在添加新幻灯片并在使用新页码获取数据后替换旧幻灯片。我希望它附加在最后一张幻灯片的末尾,这样当用户到达最后一张幻灯片并点击下一张幻灯片时,它应该获取数据并将其附加到最后一张幻灯片的末尾。
TIA!