Пропадает навигация в Owl Carosel при кол-ве слайдов больше трех. В чем может быть проблема?

Question

[Korsia]

Здравствуйте. Столкнулась с такой проблемой. Использую на сайте OwlCarosel. При кол-ве слайдов, больших, чем три, исчезает любая пагинация. Ни стрелок, ни точек. В коде в классе этих компонентов стоит disabled.
Есть крутящийся слайдер с одним слайдом - пагинация есть. Есть слайдер с четырьмя элементами. Пагинации нет. Как только уменьшаю до мобильной версии, и кол-во слайдов уменьшается до трех, пагинация тут же появляется. В интернете не нашла ответа.
В JS использую что-то вроде этого:

$(document).ready(function () {
   $(".partners__slider").owlCarousel({
      autoplay: false,
      pagination: true,
      dots: false,
      loop: true,
      responsiveClass: true,
      responsive: {
         0: {
            items: 2,
            nav: true
         },
         660: {
            items: 3,
            nav: true
         },
         1080: {
            items: 6,
            nav: true
         }
      }
   });
});

Comments

[Dymok]

С этим JS всё работает, давайте весь код полностью
https://codepen.io/UnluckySerivelha/pen/LoZyga

[Korsia]

Dymok,

<section class="partners">
			<div class="container">
				<p class="partners__title">Наши партнеры</p>
				<div class="partners__slider owl-carousel">
					<div class="partners__item item">
						<img class="partners__image" src=" img/partners-1.png" alt="Royal tulip">
					</div>
					<div class="partners__item item">
						<img class="partners__image" src=" img/partners-2.png" alt="Avrora holding">
					</div>
					<div class="partners__item item">
						<img class="partners__image" src=" img/partners-3.png" alt="kasp bank">
					</div>
					<div class="partners__item item">
						<img class="partners__image" src=" img/partners-4.png" alt="OBIS">
					</div>
					<div class="partners__item item">
						<img class="partners__image" src=" img/partners-5.png" alt="The Ritz-Carlton">
					</div>
					<div class="partners__item item">
						<img class="partners__image" src=" img/partners-6.png" alt="Paris tower">
					</div>
				</div>
			</div>
		</section>

.partners {
  padding-top: 40px;
  padding-bottom: 7px;
}

.container {
    max-width: 1230px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.partners .container {
  padding-left: 30px;
  padding-right: 30px;
}

.partners__title {
  position: relative;
  display: inline-block;
  margin: 0;
  margin-left: 30px;
  margin-bottom: 47px;
  color: #1b1b1b;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
  text-transform: uppercase;
}

.partners__title::after {
  position: absolute;
  content: '';
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #285e8a;
}

.partners .owl-item {
  height: 125px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.partners__image {
  max-height: 125px;
  width: auto !important;
  max-width: none !important;
}

[houd1ini]

Дело в том что так работает оул карусель, вам достаточно дублировать еще несколько слайдов, что бы их было больше,чем количество отображаемых на экране слайдов, ну и поставить параметр dots: true, именно он отвечает за пагинацию, по крайней мере в предыдущих версиях так было.

[Korsia]

houd1ini, в смысле? Как работает? У них на офф. сайте в примерах больше пяти слайдов и всё есть. В том то и дело, что точки мне не нужны, мне нужны стрелки, они выставлены как true, но не отображаются.

[houd1ini]

Korsia, стрелки-навигация, точки-пагинация, вы просто в вопросе говорили за пагинацию. Попробуйте изменить в инициализации скрипта количество элементов с 1080px на 1-2 меньше, и появится ли навигация?

1080: {
            items: 6,
            nav: true
}

на

1080: {
            items: 4,
            nav: true
 }

Главное, что бы в вашей разметке самих блоков, с которых оул делает слайды, было на 1 больше чем количество итемов, указанных в коде. Или просто добавьте еще парочку

<div class="partners__item item">
            <img class="partners__image" src=" img/partners-1.png" alt="Royal tulip">
</div>

[Korsia]

houd1ini,

Главное, что бы в вашей разметке самих блоков, с которых оул делает слайды, было на 1 больше чем количество итемов, указанных в коде. Или просто добавьте еще парочку

Дайте я Вас расцелую))) Банально не добавила элементов больше, чем есть на экране. Пагинация была не нужна, так. как листать было не чего. И так всегда, такие мелочи. Спасибо!!

[houd1ini]

Korsia, Всегда пожалуйста) Если мое решение Вам подошло, отмечайте мой комментарий как решение вопроса, что бы не дезориентировать других участников сообщества.

[Korsia]

houd1ini, как это сделать, не подскажете? Вы же комментарий написали, а не ответ на вопрос.

[houd1ini]

Korsia не заметил) думал жмакнул на "ответ на вопрос". Тогда не важно, желаю Вам удачи)