Reputation: 91
How to customize the ant design carousel with the following features
Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr7?file=/src/App.js
Upvotes: 0
Views: 4439
Reputation: 1494
There are probably a couple of solutions for this, I will present two.
The first is simply to override the styles for the current buttons. I have tried this for different elements and it can sometimes be a bit frustrating but it is possible. The ul with the dots have classname slick-dots.
Another solution which I would recommend is to just create your own dots and remove the standard dots from the carousel. This can easily be achieved with useRef hook. To access the goTo function of the carousel.
const App = () => {
const ref = useRef();
const goTo = (slide) => {
ref.current.goTo(slide, false);
};
return (
<div>
<Carousel ref={ref} afterChange={onChange} dots={false}>
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<button onClick={() => goTo(0)} style={btnStyle} />
<button onClick={() => goTo(1)} style={btnStyle} />
<button onClick={() => goTo(2)} style={btnStyle} />
<button onClick={() => goTo(3)} style={btnStyle} />
</div>
</div>
);
};
https://codesandbox.io/s/amazing-beaver-4brfo?file=/src/App.js:499-1411
I just styled some simple bullets but you may style them in any fashion you like, please ask if you have any questions. Good luck :)
Upvotes: 3