Какой слайдер для WordPress лучше выбрать под данный макет?
Мне дали макет в Figma, поставили задачу заверстать и посадить на WordPress (использую ACF).
В макете есть слайдер:
Вижу 3 варианта решения:
1. Написать слайдер самому (времени дали мало);
2. Подключить в общий *.min.js какую-то библиотеку (посоветуйте какая подойдёт под данный макет, только не на jQuery! Бесит.);
3. Подключить какой-то плагин для WordPress (посоветуйте какой подойдёт под данный макет, здесь можно и с использованием jQuery, ибо не мне программить, поэтому пох).
Заранее спасибо за советы.
Дополнительно:
Под данный макет подойдет совершенно любой слайдер с навигацией и пагинацией.
Я использую свайпер
Ответы:
1. Написать слайдер самому (времени дали мало);
Зачем писать если уже есть готовые мощные инструменты?
https://swiperjs.com/
https://swiperjs.com/demos
- Я как-то давно юзал его.
Там кажется у меня возникли проблемы с выносом пагинации за пределы обёртки Свайпера, так как она со свойством overflow: hidden; - Влад, так тут вам не нужно выносить
- Влад, так сверстайте свои кнопки и в options укажите их id/class. ничего костылить через css не нужно будет. просто события повесятся не на дефолтные переключатели свайпера, а на ваши кнопки.
- Виктор Майоров, да, я так и сделал.
- swiper js - использую когда нужно много разных слайдеров.
Если нужен один простой, можно взять более легковесный с поддержкой свайпов:
https://itchief.ru/javascript/simple-adaptive-slider
использую ACF
Используй родные блоки + плагины-расширители.
А ACF нужно использовать по прямому назначению, а не для вёрстки.
- Я по прямому и использую – вставка переменных, повторитель и всё такое.
- Влад, Какая разница ЧТО ты из него используешь. Ты его используешь не по назначению - ДЛЯ ВЁРСТКИ.
- Refguser, я не понимаю о чём ты говоришь.
Для вёрстки я использую Gulp и Webpack, а для того чтобы посадить вёрстку на WP, я использую ACF.
Что не так? Не понимаю. - Влад, это печально.. Занимаешься тем в чем не понимаешь.. Кури для начала это. (Осторожно ! Это может сломать все твои представления, полученные с ютубофф)
- Refguser, спасибо, обязательно почитаю. Но ты говоришь загадками. Advanced Custom Fields позволяет качественно проработать админку. Переменные в вёрстку вставляю по доке. Что не так то? Не понимаю. Тысячи разработчиков так делают.
- Влад,
Тысячи разработчиков так делают.
"Тысячи мух не могут ошибаться", ага :)
Все эти "тысячи", как и ты, насмотрелись говнороликов с ютуба, а не изучали ВП. И как и ты, делают по сути копипастом, не думая как что работает. (те, кто понимает в ВП никогда не скажут "верстка на ACF". Им даже в голову не придёт этим заниматься. И первое доказательство тому - в репо нет ни одной темы, требующей ACF)
Вот ты не очень понимаешь, что значит вставить метаполе в шаблон (и не важно ACF это будет или что-то ещё), и твердишь о каких-то "переменных". В шаблон, Карл. а не в контент. Поле, которое должно быть не для страницы, а для сущности (товар, пост и тп).
Если хочешь делать по уму - изучай блоки.
И ещё это покури и разберись что нужно делать в теме, а что плагинами.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для макета из Figma в WordPress я бы не писал слайдер с нуля, если нет очень нестандартной логики. Нормальный выбор — Swiper. Он лёгкий, популярный, хорошо документирован, поддерживает адаптив, touch, lazy load, навигацию, pagination и не привязан к jQuery.
Если вы верстаете тему сами и используете ACF, схема такая: ACF repeater для слайдов, шаблон выводит HTML, Swiper подключается как JS/CSS-зависимость темы.
В ACF обычно достаточно полей: изображение, заголовок, текст, ссылка, подпись кнопки. Не храните весь HTML слайда в редакторе, иначе потом будет сложно поддерживать одинаковый дизайн и адаптив. Пусть администратор заполняет данные, а шаблон отвечает за внешний вид.
Подключение в WordPress:
add_action('wp_enqueue_scripts', function () { wp_enqueue_style( 'swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css', [], '11' ); wp_enqueue_script( 'swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', [], '11', true ); wp_enqueue_script( 'theme-slider', get_stylesheet_directory_uri() . '/assets/js/slider.js', ['swiper'], '1.0', true ); });
Инициализация:
document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.js-project-slider').forEach((el) => { new Swiper(el, { slidesPerView: 1, spaceBetween: 16, navigation: { nextEl: el.querySelector('.swiper-button-next'), prevEl: el.querySelector('.swiper-button-prev') }, breakpoints: { 768: { slidesPerView: 2 }, 1200: { slidesPerView: 3 } } }); }); });document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.js-project-slider').forEach((el) => { new Swiper(el, { slidesPerView: 1, spaceBetween: 16, navigation: { nextEl: el.querySelector('.swiper-button-next'), prevEl: el.querySelector('.swiper-button-prev') }, breakpoints: { 768: { slidesPerView: 2 }, 1200: { slidesPerView: 3 } } }); }); });
Плагин-слайдер имеет смысл брать только если заказчик сам будет собирать сложные слайды в админке. Если слайды идут из ACF и дизайн задан макетом, плагин часто мешает: лишние стили, тяжёлый JS, сложнее контролировать адаптив.
Не забудьте про изображения: выводите нужный размер через
wp_get_attachment_image(), задавайте alt, включайте lazy loading для слайдов вне первого экрана и проверяйте, чтобы на мобильном не было фиксированной ширины карточек.Итог: для вашей задачи оптимально Swiper + ACF. Это быстрее, чем писать с нуля, и чище, чем ставить тяжёлый визуальный слайдер ради обычной карусели.