2 回答

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊
如果您對(duì)頁(yè)面切換時(shí)調(diào)用的任何內(nèi)容感到好奇,
當(dāng)您看到“react-multi-carousel”的文檔時(shí),頁(yè)面轉(zhuǎn)換時(shí)會(huì)調(diào)用一個(gè)回調(diào)函數(shù)。
<Carousel
afterChange={(previousSlide, { currentSlide, onMove }) => {
doSpeicalThing();
}}
beforeChange={(nextSlide, { currentSlide, onMove }) => {
doSpeicalThing();
}}
/>

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
您可以使用每次滑動(dòng)之前和之后調(diào)用的beforeChange
和回調(diào)。afterChange
如果您只想檢測(cè)按鈕單擊(而不是鍵盤滑動(dòng)或拖動(dòng)),則可以創(chuàng)建新的按鈕組件并將它們作為自定義箭頭傳遞。您的自定義按鈕將收到道具/狀態(tài)列表;其中之一是 的處理react-multi-carousel
程序onClick
。
您可以將自定義按鈕作為道具 (customLeftArrow
和customRightArrow
) 傳遞到輪播。
function CustomRightArrow({ onClick }) {
? function handleClick() {
? ? // do whatever you want on the right button click
? ? console.log('Right button clicked, go to next slide');
? ? // ... and don't forget to call onClick to slide
? ? onClick();
? }
? return (
? ? <button
? ? ? onClick={handleClick}
? ? ? aria-label="Go to next slide"
? ? ? className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right"
? ? />
? );
}
function App() {
? return (
? ? <Carousel
? ? ? customLeftArrow={<CustomLeftArrow />}
? ? ? customRightArrow={<CustomRightArrow />}
? ? ? infinite
? ? ? keyBoardControl
? ? >
? ? ? {images.map((image, i) => {
? ? ? ? return (
? ? ? ? ? <img
? ? ? ? ? ? key={i}
? ? ? ? ? ? style={{ width: '100%', height: '100%' }}
? ? ? ? ? ? src={image}
? ? ? ? ? ? alt=""
? ? ? ? ? />
? ? ? ? );
? ? ? })}
? ? </Carousel>
? );
}
添加回答
舉報(bào)