0

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

<VueSlickCarousel :arrows="false" :dots="true" :slidesToShow="3">
  <div class="medium_rectangle">1</div>

  <div class="medium_rectangle">2</div>

  <div class="medium_rectangle">3</div>

  <div class="medium_rectangle">4</div>
</VueSlickCarousel>
4

1 回答 1

1

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

.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: "•&quot;; /* 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。
我通常使用 an1 x :not(#id)来覆盖那些（覆盖而不使用!important）。

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

.slick-dots:not(#_) {
  background-color: rgba(0,0,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, 其他人喜欢匹配他们覆盖的每个规则的确切当前特异性。
你做你自己的事。

于 2021-04-03T13:45:26.203 回答