1

I use this plugin to create a carousel: https://kenwheeler.github.io/slick/ By default, there are dots to control the flow of the carousel. However, I'd like to change the dots to squares and also maintain an "active" effect. So I want this:

enter image description here

to look like this:

enter image description here

What I've already tried was adding this code when initializing a carousel:

 customPaging : function(slider, i) {
 return "<div class='square'></div>";
},

and adding this css:

.square {
  height: 10px;
  width: 10px;
  background-color: #ffe499;
}

.square:active {

  background-color: #ffc425;
}

But the active effect doesn't work as expected. It works only on click and then disappears.

I'm also able to change their size like this (it's not related to the code above):

.slick-dots li button:before {
  font-size: 10px;
  line-height: 10px;
  color: #FFC425 !important;
}

Maybe there is a way to change the shape using this selector?

What is the best possible way to solve the problem? I'd appreciate any help.

Richard Dallaway
  • 4,250
  • 1
  • 28
  • 39
Bartosz Chodyła
  • 85
  • 1
  • 8

1 Answers1

1

I solved the problem. This short css code was enough:

.slick-dots li button:before {
background-color: #FFC425;
height: 10px;
width: 10px;
text-indent: -9999px;
overflow:hidden; 
}
Bartosz Chodyła
  • 85
  • 1
  • 8