Как правильно подойти к вопросу: слетает Glide.js какая причина?

JavaScript

1 ответ

По вводным: на сайте стоит Glide.js, autoplay отключен.При нажатии на правую кнопку перелистывания работает нормально
По вводным: если нажимаю на левую кнопку перелистывания слайды исчезают параметры при инициализации слайдера такие:

type: "carousel", loop: true, bound: true, perView: 5,

Где искать причину?

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Мария Код Ответ

У Glide.js проблема с исчезновением слайдов при движении влево чаще всего связана с конфликтом настроек type: "carousel", loop, bound и количеством элементов. Для carousel бесконечная прокрутка реализуется через клонирование слайдов, а bound больше подходит для slider-режима, где нужно ограничить движение краями.

Первое, что я бы сделал — убрал bound из carousel:

new Glide('.glide', {
  type: 'carousel',
  perView: 5,
  gap: 16,
  autoplay: false
}).mount();

new Glide('.glide', { type: 'carousel', perView: 5, gap: 16, autoplay: false }).mount();

Если нужно именно не выходить за края, используйте type: "slider":

new Glide('.glide', {
  type: 'slider',
  bound: true,
  perView: 5,
  gap: 16,
  autoplay: false
}).mount();

new Glide('.glide', { type: 'slider', bound: true, perView: 5, gap: 16, autoplay: false }).mount();

Вторая частая причина — слайдов меньше или почти столько же, сколько perView. При perView: 5 должно быть достаточно элементов для нормального клонирования. Если элементов 5 или меньше, carousel может вести себя странно. В таком случае отключайте carousel условно:

const slides = document.querySelectorAll('.glide__slide').length;
 
new Glide('.glide', {
  type: slides &gt; 5 ? 'carousel' : 'slider',
  bound: slides &lt;= 5,
  perView: Math.min(5, slides),
  gap: 16
}).mount();

const slides = document.querySelectorAll('.glide__slide').length; new Glide('.glide', { type: slides > 5 ? 'carousel' : 'slider', bound: slides <= 5, perView: Math.min(5, slides), gap: 16 }).mount();

Также проверьте CSS. У Glide обязательна правильная структура:

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">...</li>
    </ul>
  </div>
</div>

Если на .glide__slides или .glide__slide вручную навешаны display: none, overflow, transform или transition, они могут ломать расчёт ширины.

Итог: не смешивайте carousel и bound, проверьте количество слайдов относительно perView, уберите конфликтующий CSS и после динамической подгрузки слайдов вызывайте обновление/перемонтирование Glide.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Как правильно подойти к вопросу: слетает Glide.js какая причина?

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно