Уменьшить количество точек (owl-dots) в карусели Owl-Carousel

Question

Столкнулся с такой необходимостью, когда нужно, чтобы количество отображаемых точек (owl-dots) под слайдером была меньше, чем количество слайдов в карусели. Например, слайдов у меня 8, но нужно, чтобы точек было всего четыре. Можно ли это воплотить в коде?

Также созрел вопрос по поводу смены цвета данных точек - можно ли сделать так, чтобы неактивные точки были показаны так, как на изображении.

Answer 1

как вариант:

.owl-dots{
  display:flex
}

.owl-dot{
  width:10px;
  height: 10px;
  border-radius:10px;
  padding:0;
  margin: 10px;
  background: rgba(180,0,0);
  opacity: .5;
  border: none;
  display:none;
}

.owl-dot.active{
  display: block;
  opacity: 1;
}

.owl-dot.active + .owl-dot,
.owl-dot.active + .owl-dot + .owl-dot,
.owl-dot.active + .owl-dot + .owl-dot + .owl-dot{
  display:block;
}

<div class="owl-dots">
  <button class="owl-dot"></button>
  <button class="owl-dot"></button>
  <button class="owl-dot active"></button>
  <button class="owl-dot"></button>
  <button class="owl-dot"></button>
  <button class="owl-dot"></button>
  <button class="owl-dot"></button>
  <button class="owl-dot"></button>
</div>

Answer 2

Это можно сделать в JavaScript (main,js), путём подбора значений для slidesToScroll.

Например, у меня в html коде указано 8 слайдов, которые должны выводится по 3 изображения, но дотсов тоже поначалу выводится 8 штук, а мне по макету необходимо чтобы их было 6. Я в JavaScript для slidesToScroll указал 1.5 и теперь дотсов выводится 6. Чтобы для 8 слайдов отображалось 4 дотса, то необходимо прописать slidesToScroll:2.

$(function(){

  $('.slider__inner').slick({
    arrows: false,
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 2
  });

});

БЛОГ НА HUSL

Уменьшить количество точек (owl-dots) в карусели Owl-Carousel

Ответы (2 шт):