can't change styles of dots in react-elastic-carousel

user_6210486 0
Viewed 6437

I'm using react-elastic-carousel for a project and can't find a way to change a colors of dots (pagination). How can I change the colors of dots and active one?

import React, {Component} from 'react';
import Item from '../Item/Item';
import Carousel from 'react-elastic-carousel';

import classes from './Test.module.css';

class Gallery extends Component {

    render() {
        return (
            <div>
                <Carousel
                    itemsToShow={1}
                    style={{backgroundColor: 'red', color: 'white'}}
                >
                    <Item>1</Item>
                    <Item>2</Item>
                    <Item>3</Item>
                    <Item>4</Item>
                    <Item>5</Item>
                    <Item>6</Item>
                </Carousel>
            </div>
        )
    }
}

export default Gallery;
carousel reactjs
3 Answers

Use below in your style sheet.

button.rec-dot{
  background-color: rgb(235, 16, 16);
  box-shadow: 0 0 1px 3px rgba(235, 16, 16, 0.5);
}

button.rec-dot:hover, button.rec-dot:active, button.rec-dot:focus  {
  box-shadow: 0 0 1px 3px rgba(235,16,16,0.5);
}
user_143057120

You can change the color of pagination dots by editing CSS, you will get class of that rec-dot, from there you can edit the height, width, and color of the dots.there is a separate class for active dot too. I don't know if there is any default style method but I did this for the same.

user_130753880

Here is a helpful resource for react-elastic-carousel:

DOCUMENTATION HERE

/* hide disabled buttons */
.rec.rec-arrow:disabled {
    visibility: hidden;
}

/* disable default outline on focused items */
/* add custom outline on focused items */
.rec-carousel-item:focus {
    outline: none;
    box-shadow: inset 0 0 1px 1px lightgrey;
}
user_128554070
Related