如何將圓點追加到光滑的旋轉木馬上？

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: '█'; 
}