Короткий ответ: для новых проектов в MODX лучше разделять задачи. Галерея - это одно, слайдер - другое, карусель - третье. Для хранения изображений можно использовать Gallery, а для фронта брать легкий современный слайдер вроде Swiper и подключать его локально. Старую связку Gallery + BXSlider + Fancybox оставим ниже как рабочий, но уже явно устаревший вариант.
Потому что если собрать на страницу сразу три старых плагина, она, конечно, поедет. Вопрос только куда.
Что выбрать сегодня
- Простая галерея - CSS Grid и ссылки на оригиналы изображений.
- Слайдер - Swiper с локально подключенными файлами.
- Карусель - тот же Swiper, но с несколькими карточками на экран.
- Gallery - если удобно хранить альбомы через менеджер MODX.
Вариант 1. Простая галерея без лишней магии
Если вам не нужна анимация любой ценой, делайте обычную сетку и не усложняйте страницу.
[ [!Gallery?
&album=`1`
&thumbTpl=`galleryThumbTpl`
&toPlaceholder=`gallery.items`
]]
<div class="gallery-grid">[ [+gallery.items]]</div>
<a class="gallery-card" href="[ [+image]]">
<img src="[ [+thumbnail]]" alt="[ [+name]]" loading="lazy" />
</a>
Вариант 2. Слайдер на Swiper
Подключайте Swiper локально, а не через случайный CDN из глубин интернета. Локальные зависимости потом не подкинут сюрприз в три часа ночи.
<link rel="stylesheet" href="/assets/components/swiper/swiper-bundle.min.css">
<script src="/assets/components/swiper/swiper-bundle.min.js"></script>
[ [!Gallery?
&album=`1`
&thumbTpl=`swiperSlideTpl`
&toPlaceholder=`slider.items`
]]
<div class="swiper gallery-swiper">
<div class="swiper-wrapper">[ [+slider.items]]</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-slide">
<img src="[ [+image]]" alt="[ [+name]]" loading="lazy" />
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
new Swiper(".gallery-swiper", {
slidesPerView: 1,
spaceBetween: 16,
loop: true,
pagination: { el: ".swiper-pagination", clickable: true },
navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }
});
});
</script>
Вариант 3. Карусель
Для карусели нужен тот же подход, просто показываем несколько элементов на экран.
new Swiper(".gallery-swiper", {
slidesPerView: 1.2,
spaceBetween: 12,
breakpoints: {
768: { slidesPerView: 2 },
1200: { slidesPerView: 3 }
}
});
Подводные камни
- Не грузите сразу несколько библиотек для одной и той же задачи. Одной обычно хватает.
- Не правьте ядро Gallery и не переписывайте пакет ради одной мелочи. Выносите логику в чанки и шаблоны.
- Сжимайте изображения до загрузки. Даже самый красивый слайдер не спасет страницу, если каждая картинка весит как маленькая трагедия.
- Добавляйте
loading="lazy", где это уместно.
Legacy-вариант: Gallery + BXSlider + Fancybox
Если проект старый и уже собран на BXSlider и Fancybox, можно это не ломать сразу. Но новый проект я бы так уже не начинал.
Причина простая: лишние зависимости, устаревший фронт-стек и больше шансов словить конфликт с новой версткой. Старый рецепт оставляем как запасной вариант для поддержки legacy, но не как рекомендацию по умолчанию.
Что использовать на практике
- Gallery + простая сетка - если нужна галерея без анимационной драмы.
- Gallery + Swiper - если нужен слайдер или карусель.
- BXSlider/Fancybox - только если проект уже исторически так живет и вы не готовы к миграции прямо сейчас.
Связанные статьи
Актуально для: MODX Revolution 2.8+, MODX 3.x, Gallery для хранения альбомов, Swiper для современного фронтенда, BXSlider/Fancybox - только для legacy-проектов.
Комментарии
Комментарии (0)