How to style carousel dots?

Question

How do I style my carousel dots to become like this ?

enter image description here

Here is what I have now.

enter image description here

Here is how I style it.

.slick-dots {
  position: absolute;
  bottom: -45px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 5px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

HTML

<div class="row slick">
    // a bunch of images
</div>

Could you provide us with a piece of the html you are styling? — Thaillie, Dec 12 '14 at 18:39
Those look like sprites, so you'll have to style them to use images as a background. — Andrew, Dec 12 '14 at 18:40
@Andrew: You want to answer ? Go a head ! I will pick the best and accept it. — iori, Dec 12 '14 at 18:43
Are you using twitter bootstrap carousel like here? http://getbootstrap.com/examples/carousel/ — Leandro Carracedo, Dec 12 '14 at 18:49
@NicoO : Wow. I like your answer. It's really close to the picture I post. I'm not sure how to integrate my css with your. Answer it, I will make sure to accept your. :) — iori, Dec 12 '14 at 18:59
Glad you like it. I see no reason in posting a new answer as @im1dermike posted something realy similar. — Nico O, Dec 12 '14 at 19:02
I just feel like you deserve +25 for this because your answer is the closest to what I was asking. Don't get me wrong, I like @im1dermike answer too. Therefore, I upvote his so he got +10. ;) — iori, Dec 12 '14 at 19:07

Zaqx · Answer 1 · 2014-12-14T08:45:32.700

Here you go. :)

nav.carousel:hover {
  cursor: default;
}

/* Hide the radio button */
nav.carousel input[type=radio] {
  display: none;
}

/* All styling takes place on the label element */
nav.carousel label {
  display: inline-block;
  background: #ddd;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  box-shadow: inset 0 1px 1px 0 #999;
}
nav.carousel label:hover {
  background: #bbb;
  cursor: pointer;
  box-shadow: inset 0 1px 1px 0 #777;
}
nav.carousel input:checked + label {
  background: linear-gradient(#00CFFF, #1584bc);
  box-shadow: inset 0 0 1px 1px #087DC0;
}

<nav class="carousel">
  <input id="carousel-item-1" type="radio" name="carousel-dots">
  <label for="carousel-item-1">Go to item 1</label>

  <input id="carousel-item-2" type="radio" name="carousel-dots" checked>
  <label for="carousel-item-2">Go to item 2</label>

  <input id="carousel-item-3" type="radio" name="carousel-dots"> 
  <label for="carousel-item-3">Go to item 3</label>

  <input id="carousel-item-4" type="radio" name="carousel-dots">
  <label for="carousel-item-4">Go to item 4</label>

  <input id="carousel-item-5" type="radio" name="carousel-dots">
  <label for="carousel-item-5">Go to item 5</label>

  <input id="carousel-item-6" type="radio" name="carousel-dots"> 
  <label for="carousel-item-6">Go to item 6</label>
</nav>

@dcsan not sure what you mean by style each one. CSS describes styles to be applied if elements meet the criteria laid out in the CSS selector. Nowhere in the CSS in this example do I have a selector that styles an individual dot. As such the number of dots are irrelevant; there could be 20 dots or 100000 dots it makes no difference to the styling in this example. Does that answer your question? — Zaqx, May 09 '15 at 01:31

score 4 · Answer 2 · answered Nov 21 '19 at 22:12

this is my example

.slick-dots {
  bottom: 50px;
  li button:before,
  li.slick-active button:before {
    color: transparent;
    opacity: 1;
  }
  li button:before{
    background-color: transparent;
    border: 4px solid #fff;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    width: 20px;

  }
  li.slick-active button:before {
    background-color: #fff;
  }
}

mellis481 · Answer 3 · 2014-12-12T18:56:41.037

I threw this together which does it purely with HTML and CSS: http://jsfiddle.net/kajrttgv/2

<div class="container">
    <span class="dot"></span>
    <span class="dot active"></span>
    <span class="dot"></span>
</div>

.dot {
    background-color: #eee;
    border: 1px solid #666;
    border-radius: 5px;
    box-shadow: inset 1px 1px 1px #888;
    display: inline-block;
    height: 10px;
    width: 10px;
}
.dot.active {
    background-color: #41ABE5;
    box-shadow: inset 2px 0px 2px -2px #333;
}

score 0 · Answer 4 · answered Dec 12 '14 at 18:58

I have also tried to create some dots :p. JSFiddle: http://jsfiddle.net/Thaillie/o8q56tga/

<div class="container">
    <span class="slickdot"></span>
    <span class="slickdot active"></span>
    <span class="slickdot"></span>
</div>

.container {
    padding: 20px;
}

.slickdot {
    height: 15px;
    width: 15px;
    background: lightgray;
    border-radius: 50px;
    display: inline-block;
    box-shadow:0px 0px 4px gray inset;
}

.slickdot.active {
    background-color: #41ABE5;
    box-shadow: inset 0px 0px 4px #888888;
}

Thanks for your solution. Do you have them in JSFiddle ? – iori Dec 12 '14 at 19:01 — iori, Dec 12 '14 at 19:01

score 0 · Answer 5 · answered Aug 27 '21 at 11:17

To get square custom dots in react slick carousel.

.slick-dots li {
    margin: 0;
}

.slick-dots {
    margin-top: 50px;
}

.slick-dots li button:before, .slick-dots li.slick-active button:before {
    color: transparent;
    opacity: 1;
}

.slick-dots li button:before {
    margin-top: 5px;
    background-color: transparent;
    border: 1px solid rgb(90, 90, 90);
    border-radius: 20%;
    display: inline-block;
    height: 5px;
    width: 10px;
}
.slick-dots li.slick-active button:before {
    background-color: rgb(26, 24, 24);
}

score -1 · Answer 6 · 2014-12-12T18:53:58.903

Here is how I would do it :

I will design every little pieces using Photoshop. that way I can make it exactly like what you described.

I will create 2 small circle, with 20 px by 20 px

1.gradient light-blue and dark-blue
2.gradient black and gray

Save them as .PNG files and load them back into .CSS file Then I'll apply the background-image: url("blue_dot.png"); to the blue one, and background-image: url("black_dot.png"); to the black one.

If needed, adjust your width and height to fit your needs.

How to style carousel dots?

6 Answers6

Linked