Skip to content

Instantly share code, notes, and snippets.

@kruxor

kruxor/slick-dots-circles.css

Created May 3, 2017 00:24
Show Gist options
  • Save kruxor/89331189ccd33d51bb9cc7e9ebf87ab0 to your computer and use it in GitHub Desktop.
Save kruxor/89331189ccd33d51bb9cc7e9ebf87ab0 to your computer and use it in GitHub Desktop.
Download ZIP
Slick slider dots show a circle instead of a dot
Raw
slick-dots-circles.css
.slick-dots li.slick-active button:before, .slick-dots li button:before {
color: #FFF;
opacity: 1;
font-size: 16px;
}
.slick-dots li.slick-active button {
border: 5px solid #00AC9F;
border-radius: 100%;
}
.slick-dots li.slick-active button:before {
color: transparent;
}
@nihaltowfiq
Copy link

can you give me a picture of what you styled of this CSS?

@kruxor
Copy link
Author

kruxor commented Feb 19, 2021

It was ken wheelers slick carousel. This seems to be only partially working now when I test it.
preview: https://i.imgur.com/uOZ3rM8.png
demo here: https://kruxor.com/view/code/fXepZ/
I was making the dots into larger circles

@nihaltowfiq
Copy link

I want to make this kind of carousel using react (react-slick, slick-carousel). I am still on it and suffering :p
can you help me with this??
carousel image: https://ibb.co/9wrPGB0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment