Как решить проблему загрузки слайдеров по кнопке показать еще?
На странице выводится несколько слайдеров плагина Master Slider, скрытых скриптом и добавляемых кнопкой показать еще (не Ajax). При добавлении слайдеры не инициализируются. В панели rendered size: 0x0px. Изначально задача была выводить в табах, история такая же, при переключении таба. Наверное нужно заново инициализировать слайдеры, но как это сделать в плагине?
Скрипт:
$(document).ready(function() { let count = $('.projects .projects__list .projects__item').length, start = 3, show = 3; $('.projects .projects__list .projects__item').addClass('d-none'); $('.projects .projects__list .projects__item:lt(' + start + ')').removeClass('d-none'); $('.show-more').click(function(e) { e.preventDefault(); let load = $(this).data('load'), more = $(this).data('more'); start = (start + show <= count) ? start + show : count; $(this).text(load); setTimeout(() => { $('.projects .projects__list .projects__item:lt(' + start + ')').removeClass('d-none'); if ($('.projects .projects__list .projects__item:not(.d-none)').length == count) { $(this).parent().remove(); } $(this).text(more); }, 1000); }); }); |
$(document).ready(function() { let count = $('.projects .projects__list .projects__item').length, start = 3, show = 3; $('.projects .projects__list .projects__item').addClass('d-none'); $('.projects .projects__list .projects__item:lt(' + start + ')').removeClass('d-none'); $('.show-more').click(function(e) { e.preventDefault(); let load = $(this).data('load'), more = $(this).data('more'); start = (start + show <= count) ? start + show : count; $(this).text(load); setTimeout(() => { $('.projects .projects__list .projects__item:lt(' + start + ')').removeClass('d-none'); if ($('.projects .projects__list .projects__item:not(.d-none)').length == count) { $(this).parent().remove(); } $(this).text(more); }, 1000); }); });
Подскажите решение
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема со слайдерами после кнопки “Показать ещё” обычно возникает потому, что слайдер инициализируется, пока его контейнер скрыт. В этот момент ширина блока равна нулю, Master Slider или другой слайдер рассчитывает размеры неправильно, а после показа сам уже не пересчитывается.
Решение: после раскрытия скрытого блока нужно вызвать пересчёт/resize слайдера. Самый простой вариант — после изменения видимости отправить событие resize:
document.addEventListener('click', function (e) { const btn = e.target.closest('.js-show-more'); if (!btn) return; document.querySelectorAll('.is-hidden').forEach(function (item) { item.classList.remove('is-hidden'); }); setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 100); });document.addEventListener('click', function (e) { const btn = e.target.closest('.js-show-more'); if (!btn) return; document.querySelectorAll('.is-hidden').forEach(function (item) { item.classList.remove('is-hidden'); }); setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 100); });
Если у Master Slider доступен API конкретного экземпляра, лучше вызвать его метод обновления/resize. Название зависит от версии и способа инициализации, поэтому сначала посмотрите в консоли, где хранится объект слайдера. Часто помогает задержка 100-300 мс после показа, потому что браузеру нужно пересчитать layout.
Также проверьте CSS. Если скрываете карточки через
display:none, слайдеры внутри точно получат нулевые размеры. Иногда лучше использовать ленивую инициализацию: создавать слайдер только тогда, когда карточка стала видимой. Это надёжнее, если на странице много слайдеров и они тяжёлые.