cambia la dimensione dei punti in slick.js

Question

Cerco di implementare il cursore slick.js con punti nel mio sito web. I punti di scorrimento sono di dimensioni molto ridotte. Posso cambiare la dimensione dei punti? o è di default uno

mio css

.slider { 
      width: 650px; 
      margin: 0 auto; 
     } 

     img { 
      width: 200px; 
      height: 200px; 
     } 

mio html

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="slider-about"> 
      <div class="slider"> 
       <div> 
        <img src="resources/image/slide1.jpg"> 
       </div> 
       <div> 
        <img src="resources/image/slide2.jpg"> 
       </div> 
       <div> 
        <img src="resources/image/slide3.jpg"> 
       </div> 
       <div> 
        <img src="resources/image/slide1.jpg"> 
       </div> 
       <div> 
        <img src="resources/image/slide2.jpg"> 
       </div> 
       <div> 
        <img src="resources/image/slide3.jpg"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

miei JS:

$('.slider').slick({ 
     slidesToShow: 3, 
     slidesToScroll: 3, 
     dots: true, 
     infinite: true, 
     cssEase: 'linear' 
    }); 

questo è puntini appered

Answer 1

Lo styleshe tema predefinito et slick-theme.css usa "slick" font-family per le icone. Hai caricato la cartella dei file dei font nel tuo progetto? O se non si desidera utilizzare la "chiazza di petrolio" font-family, è possibile regolare la seguente regola CSS on line 178 nella chiazza di petrolio-theme.css

.slick-dots li button:before 
    { 
     font-family: 'slick'; 
     font-size: 6px; 
     line-height: 20px; 
     ... 
    } 

come questo

.slick-dots li button:before 
    { 
     font-size: 20px; 
     line-height: 20px; 
     ... 
    }