首頁猿問如何檢測用戶是否點擊了react-...

如何檢測用戶是否點擊了react-multi-carousel中的箭頭？

JavaScript

江戶川亂折騰 2023-10-20 10:22:08

如何檢測用戶是否單擊了上一個/下一個箭頭來切換react-multi-carousel中自動播放的值？ return ( <Carousel autoPlay={true} autoPlaySpeed={4500} customTransition="all .5" transitionDuration={300} infinite={true} > {movies.map((movie) => ( <img key={movie.id} style={{ width: "100%", height: "100%" }} src={movie.image} alt={movie.title} /> ))} </Carousel>

查看完整描述

2 回答

心有法竹

TA貢獻1866條經驗獲得超5個贊

如果您對頁面切換時調用的任何內容感到好奇，

當您看到“react-multi-carousel”的文檔時，頁面轉換時會調用一個回調函數。

這里

<Carousel

afterChange={(previousSlide, { currentSlide, onMove }) => {

doSpeicalThing();

}}

beforeChange={(nextSlide, { currentSlide, onMove }) => {

doSpeicalThing();

}}

反對回復 2023-10-20

HUWWW

TA貢獻1874條經驗獲得超12個贊

您可以使用每次滑動之前和之后調用的beforeChange和回調。afterChange

如果您只想檢測按鈕單擊（而不是鍵盤滑動或拖動），則可以創建新的按鈕組件并將它們作為自定義箭頭傳遞。您的自定義按鈕將收到道具/狀態列表；其中之一是的處理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>

? );

}

反對回復 2023-10-20

2 回答
0 關注
145 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何檢測用戶是否點擊了react-multi-carousel中的箭頭？

如何檢測用戶是否點擊了react-multi-carousel中的箭頭？

2 回答

添加回答

如何檢測用戶是否點擊了react-multi-carousel中的箭頭？