Не отображаются дотсы в режиме mobile

Доброго времени суток.

При адаптации блока с tiny слайдером возникла следующая проблема:

При разрешении экрана с 320 до 575 px хочу сделать дотсы снизу слайдера, код следующий:

const slider = tns({
    container: '.carousel__inner',
    items: 1,
    slideBy: 'page',
    autoplay: false,
    controls: false,
    nav: false,
    responsive: {
        320: {
            nav: true
        },
        575: {
            nav: false
        }
    }
  });

document.querySelector('.prev').addEventListener('click', function () {
    slider.goTo('prev');
});

document.querySelector('.next').addEventListener('click', function () {
    slider.goTo('next');
});

    .carousel {
        padding: 45px 35px;
        .prev {
            display: none;
        }
        .next {
            display: none;
        }
        .tns-outer {
            position: relative;
        }
        .tns-nav {
            display: block;
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            button {
                width: 17px;
                height: 17px;
                border-radius: 100%;
                background-color: $main-color;
                border: none;
                margin-right: 5px;
                
            }
            .tns-nav-active {
                background-color: green;
            }
        }
    }

В браузере в редакторе кода в режиме desktop все работает, в режиме mobile дотсы пропадают и у блока tns-nav и вложенных элементов параметр display становится в none. Подскажите почему так происходит и как это исправить?

Скриншоты https://ibb.co/pJG3bW1 

                  https://ibb.co/Sxnn9vY