Slick Carousel Dots показывает «число / кнопка» - PullRequest
Новая
       17

Slick Carousel Dots показывает «число / кнопка»

0 голосов
/ 17 февраля 2020

enter image description here

.slick-dots {
  position: absolute;
  height: 50px;
  bottom: 0px;
  width: 100%;
  left: 0px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  text-align: center;
  font-size: 10;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li a {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 120px;
  height: 75px;
  display: block;
  visibility: hidden;
  border: 4px solid rgba(0, 0, 0, .50);
  margin-left: -60px;
  margin-bottom: 15px;
  -webkit-transition: visibility 0.5s linear 0.5s;
  transition: visibility 0.5s linear 0.5s;
  -webkit-animation: fadeOut 0.5s both;
  animation: fadeOut 0.5s both;
}
<div class="row">

  <div class="col-12 col-md-12 banner-section">
    <div class="slikslider3" style="clear: both">

      <div>
        <picture>
          <source media="(max-width: 900px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png">
          <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" alt="banner" style="z-index:1" class="img-fluid">
        </picture>

      </div>


      <!-- 1st end -->
      <div>
        <picture>
          <source media="(max-width: 900px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png">
          <img src="https://content.fortune.com/wp-content/uploads/2017/01/google.jpeg" alt="banner" style="z-index:1" class="img-fluid">
        </picture>
      </div>
    </div>
  </div>
</div>

Но почему-то точки показывают цифры вместо точек, есть идеи, как это сделать? Поиск по всем методам / решениям, но "числа" все еще показывают

Я приложил свои HTML коды, так или иначе, что число показывается вместо точек.

1 Ответ

0 голосов
/ 17 февраля 2020

Надеюсь, это поможет вам. 

.slick-dots li a.dot {
    font-size: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #ddd;
}
.slick-active a.dot {
    background: red;
}
...