react-styled-carousel icon indicating copy to clipboard operation
react-styled-carousel copied to clipboard

How to customize style?

Open raghav1086 opened this issue 6 years ago • 1 comments

How to customize style of carousel for example if I need to use different image/icon for left and right arrows and dots.

raghav1086 avatar May 30 '19 03:05 raghav1086

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}/>
);

spookyMilly avatar Feb 18 '20 09:02 spookyMilly