如何在 vue-slick-carousel 中更改点样式

如何解决如何在 vue-slick-carousel 中更改点样式

我正在使用 vue-slick-carousel 包在 Vue js 应用程序中，我想更改滑块点样式、更改颜色、背景、宽度、高度等，我该如何实现？这是我的代码

sudo hwclock -s

解决方法

以下是当前设置这些值的内容：

.slick-dots {
  background-color: transparent; /* bg color of container */
}
.slick-dots button:before {
  color: #000; /* color of dots */
  opacity: .25; /* opacity of dots */
  background-color: transparent; /* bg color of each "button" 
                                  * (blends with the one set in .slick-dots
                                  * if opacity is not 1) */
  content: "•"; /* this is the actual dot (yep,it's text)
                 * set it to ❥,? or whatever other string you want); 
             NOTE: don't set it to `none`: the dots won't display! */
  font-size: 10px; /* font-size of the dot */
}
.slick-dots .slick-active button:before {
  /* everything already listed under `.slick-dots button:before`
     except `opacity` is set to 1 by default */
}

请注意，当前设置这些值的选择器的特异性相当高。例如，在活动点不透明度的情况下，它是 4 x classes + 2 x element（例如：.slick-slider[data-v-aa003c28] .slick-dots .slick-active button:before）。
我通常使用 1 x :not(#id) 来覆盖这些（覆盖而不使用 !important）。

适用的SCSS示例（需要解析！）：

.slick-dots:not(#_) {
  background-color: rgba(0,.21);
  button:before {
    color: cyan;
    opacity: 1;
  }
  slick-active button:before {
    color: fuchsia;
  }

/* rounded dark container around dots */

  display: flex !important; /* override inline style ! */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1rem;
  width: auto; 
  margin: 0 auto;
  padding: .25rem;
}

最后是这样的：

注意：我不是在告诉您如何应对自己的 CSS 特异性战争，我只是向您展示了我通常如何应对地雷。其他人使用 !important，其他人喜欢匹配他们覆盖的每个规则的确切当前特异性。
你做你自己的事。