react-styled-carousel
react-styled-carousel copied to clipboard
How to customize style?
How to customize style of carousel for example if I need to use different image/icon for left and right arrows and dots.
Hi, I know it's been a while, but here is how I styled the Dots with styled-components in my React.js component:
const DotsWrapper = styled.ul`
display: block;
list-style: none;
text-align: center;
padding: 0px;
margin: 0px;
li button {
pointer-events: all;
border: 0;
background: 0 0;
cursor: pointer;
font-size: 1.8em;
line-height: 1.2em;
margin: 0 5px;
transition: color 0.3s;
}
li button:hover {
color: #D4D800;
}
`;
const ReferenceSlider = props => (
<Slider
cardsToShow={1}
showArrows={false}
showDots={true}
autoSlide={false}
margin={"20px"}
DotsWrapper={DotsWrapper}/>
);