thay đổi kích thước dấu chấm trong slick.js

Question

Tôi cố gắng triển khai thanh trượt slick.js bằng dấu chấm trong trang web của mình. các chấm trượt có kích thước rất nhỏ. Tôi có thể thay đổi kích thước của các chấm không? hoặc đó là mặc định một

css của tôi

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

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

html của tôi

<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> 

js của tôi:

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

đây là chấm appered

Answer 1

Chủ đề styleshe mặc định et slick-theme.css sử dụng font chữ "slick"-family cho các biểu tượng. Đã tải thư mục tệp phông chữ lên dự án của bạn? Hoặc nếu bạn không muốn sử dụng "mượt" font-family, bạn có thể điều chỉnh các quy tắc CSS sau trên dòng 178 trong slick-theme.css

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

như thế này

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