.ant-carousel { // Arrows .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; &:hover, &:focus { outline: none; background: transparent; color: transparent; &:before { opacity: 1; } } &.slick-disabled:before { opacity: 0.25; } } .slick-prev { left: -25px; &:before { content: "←"; } } .slick-next { right: -25px; &:before { content: "→"; } } // Dots .slick-slider { padding-bottom: 45px; } .slick-dots { position: absolute; bottom: 0; list-style: none; display: block; text-align: center; padding: 0; width: 100%; li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; 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; &:hover, &:focus { outline: none; &:before { opacity: 1; } } &:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-size: 18px; font-family: arial, sans-serif; line-height: 20px; text-align: center; color: gray; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } &.slick-active button:before { color: black; opacity: 0.75; } } } } .ant-carousel-vertical { .slick-slider { padding-bottom: 0; } .slick-dots { width: 20px; bottom: auto; right: -35px; top: 0; } }