如何解决在 React 的 Swiper 滑块中动态附加幻灯片
我正在 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!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。