如何向添加自定义箭头按钮？
如何向添加自定义箭头按钮？
提问于 2021-10-22 07:06:54
我正在使用alice (https://github.com/maxmarinich/react-alice-carousel/blob/master/README.md)制作一个旋转木马组件，但是在定制箭头时遇到了困难。代码如下
export const Carousel: React.FC<CarouselProps> = ({text }) => {
const [activeIndex, setActiveIndex] = useState(0);
const items = ["item1","item2","item3"]
const slidePrev = () => {
activeIndex==0?(
setActiveIndex(items.length-1)):
setActiveIndex(activeIndex - 2);
};
const slideNext = () => {
activeIndex==items.length-1?(
setActiveIndex(0))
: setActiveIndex(activeIndex + 2)
};
return(
<div className="grid grid-cols-3">
<div className="col-span-2>
{text}
</div>
<div className="flex justify-end">
<button className="px-8" onClick={slidePrev}><ArrowL/></button>
<button className="px-8" onClick={slideNext}><ArrowR/></button>
</div>
<div className="col-span-3 px-10">
<AliceCarousel
mouseTracking
disableDotsControls
disableButtonsControls
activeIndex={activeIndex}
items={items}
responsive={responsive}
controlsStrategy="responsive"
autoPlay={true}
autoPlayInterval={5000}
infinite={true}
keyboardNavigation={true}
/>
</div>
</div>
)}上面的代码改变了activeIndex，因此改变了项目的显示顺序，但是它这样做时没有“幻灯片”动画。我看过在使用的库中提供的例子，但是似乎无法使它顺利地滑动。我做错了什么？
Stack Overflow用户
发布于 2022-03-19 15:56:13
对于renderNextButton/renderPrevButton，您必须首先声明一个函数，然后将该函数传递给Alice的render选项。
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
export const Carousel: React.FC<CarouselProps> = ({text}) => {
const items = ["item1","item2","item3"]
const renderNextButton = ({ isDisabled }) => {
return <ArrowForwardIosIcon style={{ position: "absolute", right: 0, top: 0 }} />
};
const renderPrevButton = ({ isDisabled }) => {
return <ArrowBackIosIcon style={{ position: "absolute", left: 0, top: 0 }} />
};
return (
<div className="grid grid-cols-3">
<div className="col-span-2"> // ---> you forgot to add closing string quotation mark
{text}
</div>
<div className="col-span-3 px-10">
<AliceCarousel
mouseTracking
disableDotsControls
// disableButtonsControls // ---> also remove this
// activeIndex={activeIndex} // ---> no need to this anymore
items={items}
responsive={responsive}
controlsStrategy="responsive"
autoPlay={true}
autoPlayInterval={5000}
infinite={true}
keyboardNavigation={true}
renderPrevButton={renderPrevButton}
renderNextButton={renderNextButton}
/>
</div>
</div>
)
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69672663
复制相关文章
相似问题
腾讯云开发者
