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

Question

Korsia @Korsia

Верстальщик

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

Здравствуйте. Столкнулась с такой проблемой. Использую на сайте 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
         }
      }
   });
});

Вопрос задан более трёх лет назад
138 просмотров

9 комментариев

Подписаться 1 Простой 9 комментариев

Dymok @UnluckySerivelha

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

Написано более трёх лет назад

Korsia @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 @houd1ini

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

Написано более трёх лет назад
Korsia @Korsia Автор вопроса

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

Написано более трёх лет назад
houd1ini @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 @Korsia Автор вопроса

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

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

Написано более трёх лет назад
houd1ini @houd1ini

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

Написано более трёх лет назад
Korsia @Korsia Автор вопроса

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

Написано более трёх лет назад
houd1ini @houd1ini

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Как при мощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 6 часов назад
- 26 просмотров
0

ответов
PHP

+2 ещё

Средний
Некорректная работа submit?
- 1 подписчик
- 7 часов назад
- 36 просмотров
0

ответов
HTML

+2 ещё

Простой
Media запросы, нужно менять каждые 10px. Может проблема в коде?
- 2 подписчика
- 8 часов назад
- 257 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 8 часов назад
- 19 просмотров
0

ответов
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 10 часов назад
- 41 просмотр
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 14 часов назад
- 156 просмотров
1

ответ
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 15 часов назад
- 118 просмотров
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- 15 часов назад
- 93 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- 16 часов назад
- 271 просмотр
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 17 часов назад
- 101 просмотр
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Найти ошибку flutter_map

26 апр. 2024, в 05:31

1000 руб./за проект

Разработать электронику для весов с Wi-Fi

26 апр. 2024, в 01:22

1000 руб./в час

Очень срочно нужно помочь запустить программу с UI

26 апр. 2024, в 00:13

1000 руб./за проект

С этим JS всё работает, давайте весь код полностью
https://codepen.io/UnluckySerivelha/pen/LoZyga
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; }
Дело в том что так работает оул карусель, вам достаточно дублировать еще несколько слайдов, что бы их было больше,чем количество отображаемых на экране слайдов, ну и поставить параметр dots: true, именно он отвечает за пагинацию, по крайней мере в предыдущих версиях так было.
houd1ini, в смысле? Как работает? У них на офф. сайте в примерах больше пяти слайдов и всё есть. В том то и дело, что точки мне не нужны, мне нужны стрелки, они выставлены как true, но не отображаются.
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>
houd1ini,
Главное, что бы в вашей разметке самих блоков, с которых оул делает слайды, было на 1 больше чем количество итемов, указанных в коде. Или просто добавьте еще парочку

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт