/ home / css / slick slider - changing the dots /

Slick Slider - Changing the Dots

11:14 pm, February 25, 2016 4,259 57 0.3 @ 200 wpmrate up KruXoR source
23

Original Post Date: 5:06 am, August 13, 2014

If you want rounded dots, just do the following. This also removes the tiny dot in the center.

.slick-dots li button:before {
content:"";
}
.slick-dots li button {
border-radius: 10px;
background:rgba(255,255,255,0.5);
}
li.slick-active button {
background:#FFF;
}
kenwheeler.github.io
11:14 pm, February 25, 2016 4,259 57 source

Comments

The above produces nice round dots.. I wanted smaller square ones.… setting border to smaller numbers, jet began to progressively reveal a box with rounded corners. Zero returns a sharp corner… but still large. You can then size them by height and width values to get whatever size you wish. Also note active and base color adjusted.

THanks to the OP!!!

.slick-dots li button:before {
content:"";
}
.slick-dots li button {
width: 5px;
height: 5px;
border-radius: 0px;
background: #203695;

}
li.slick-active button {
background: #9ab8f9;
Guest @ 12:14 am, April 4, 2017 Rating: +7 Reply
thank you
Guest @ 8:17 am, August 2, 2016 Rating: +30 Reply

Reports

Add Report

Report's

KruXoR

This is a site where i basically just post whatever i feel like at the time, it has no one particular topic but usually. Just my ideas and links and random bits of code that i find.

Follow Me..

@KruXoR

Minecraft

Looking for the kruxor minecraft server mc.kruxor.com? we have migrated it to... icekraft.com if you want to play on there just connect to play.icekraft.com:25535 or mc.kruxor.com should also still work.

Favorite Links