(OwlCarousel) Точки скрыты

Проблема заключается в том, что на сайте почему-то точки под слайдом не работают, хотя в коде они активированы. Самое интересное, что точки на странице существуют, но подписаны под классом owl-dots disabled и визуально скрыты. Я пробовал поставить свойства display: block или padding: 10px, но ничего не даёт эффекта.

Проблема на гифке

<!-- HTML -->
<div class="special__list owl-carousel" id="owl_about_main_slider">
    <img class="special__item" src="img/special1.jpg">
    <img class="special__item" src="img/special2.jpg">
    <img class="special__item" src="img/special3.jpg">
    <img class="special__item" src="img/special4.jpg">
</div>

// JavaScript
$(window).resize(function() {
    if($(window).width() <= 1300){
      startCarousel()
    } else {
      stopCarousel()
    }
})

function startCarousel(){
    $("#owl_about_main_slider").owlCarousel({
        slideSpeed: 300,
        dots: true,
        autoWidth: true,
        items: 4,
        margin: 10
    })
}

function stopCarousel() {
  var owl = $('.owl-carousel')
  owl.trigger('destroy.owl.carousel')
  owl.addClass('off')
}

Нужно ли добавить какие-то необходимые свойства в CSS или ошибка заключается конкретно в .js файле?


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

Автор решения: pyduti

Давайте так сначала вы поменяете значение items: 4 на меньше чем у вас есть блоков img ну что-то типо items: 3, 2, 1)) так как dots не отображаються из-за этого скорее всего :)

А если хотите хакнуть disable то поставте display: block!important

→ Ссылка
Автор решения: Anisimov

Оказывается этому блоку только лишь не хватало класса, под названием owl-theme. Точки отображаюся.

→ Ссылка