css 光滑的圆点和箭头样式

Posted 2021-05-13

.slick-dots button {
   background: none;
   border: 2px solid #662136;
   width: 12px;
   height: 12px;
   display: block;
   border-radius: 50%;
   font-size: 0;
   color: transparent;
}

.slick-dots {
   list-style: none;
   display: flex;
   justify-content: center;
   padding: 0;
}

.slick-dots li {
   margin: 5px;
}

.slick-active button {
   background: #662136;
}

.slick-prev, .slick-next {
   position: absolute;
   width: 20px;
   height: 20px;
   left: 0;
   bottom: 0;
   cursor: pointer;
   background-image: url(img/arrow-left.png);
   background-repeat: no-repeat;
   background-size: contain;
   z-index: 1;
   border: solid 2px #55b556;
   padding: 10px;
   background-position: center;
   font-size: 0;
   color: transparent;
}
 
.slick-next {
   right: 0;
   left: auto;
   background-image: url(img/arrow-right.png);
}