如何将圆点追加到光滑的旋转木马上？

Question

我想给自己的点打造一个流畅的线条（像这样：http://imgur.com/4a6asre）我怎么知道这件事？我需要添加点吗？我试着改变宽度和按钮的高度，并添加border-radius：0，但这似乎不起作用...因为这些点是由字体大小控制的吗？

.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; l 
ine-height: 20px; 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 id="container"> 

    <div class="one"> 

     <div class="main-gallery"> 

      <div class="gallery-cell"><img src="img/one/01.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/02.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/03.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/04.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/05.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/06.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/07.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/08.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/09.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/10.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/11.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/12.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/13.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/14.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/15.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/16.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/17.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/18.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/19.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/21.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/22.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/23.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/24.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/25.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/26.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/27.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/28.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/29.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/30.jpg"></div> 
      <div class="gallery-cell"><img src="img/one/31.jpg"></div> 

     </div> 

    </div> 

我尝试添加边框半径和改变的高度和宽度，但似乎不工作？

谢谢！

Answer 1

，最简单的方式做到这一点根据你的代码是 - 改变content:“点”到“方/块”象下面这样：

.slick-dots li button:before { 
    content: "\2588\2588\2588\2588\2588"; 
} 

完整的示例 - http://jsfiddle.net/0fpztffr/5/

查找更多形状 - http://www.nice-entity.com/shapes-symbols（链接不相关 - 更多？ - ）

Answer 2

@Pangloss的解决方案工作，但它显示每个幻灯片许多方块。

如果你想为每张幻灯片只有一个平方，

.slick-dots li button:before { 
content: '█'; 
}