Создание слайдера с миниатюрами в Bricks Builder

В этой статье мы рассмотрим, как создать слайдер с миниатюрами в Bricks Builder, используя стандартные слайдеры, WP_Query для получения изображений и JavaScript для синхронизации двух слайдеров.

Шаг 1: Подготовка данных для слайдера

Добавьте виджет slider (nestable) в структуру вашего проекта. После чего для слайда настройте query loop.

Для начала нам нужно получить изображения из метаполя записи. Мы будем использовать WP_Query для получения изображений и их отображения в слайдере.

В динамическом поле изображения укажите post_id:

В Query Loop выбираем метод получения данных с помощью PHP и добавляем запрос:

В запросе вместо gallery в 1 строке укажите название метаполя вашей галереи:

$gallery = get_post_meta(get_the_ID(), 'gallery', true);

// Преобразуем строку в массив, если это не массив
if (!is_array($gallery)) {
    $gallery = explode(',', $gallery);
}

// Преобразуем элементы массива в целые числа
$gallery = array_map('intval', $gallery);

// Формируем WP_Query аргументы
return [
    'post_type'      => 'attachment',
    'posts_per_page' => 5,
    'post__in'       => empty($gallery) ? [0] : $gallery, // Предотвращаем загрузку изображений
    'post_status'    => 'any'
];

Этот код получает идентификаторы изображений из метаполя gallery и формирует WP_Query, чтобы загрузить изображения.

Шаг 2. Создание слайдера миниатюр

После того как вы настроили основной слайдер, нужно создать слайдер для миниатюр. Важный момент, запросы в основном слайдере и миниатюрах должны совпадать:

Шаг 3. Синхронизация слайдеров

После того, как ваша структура была создана и настроена, пришло время синхронизировать ваши слайдеры, чтобы они работали как единый компонент.

Для слайдера миниатюр нужно добавить аттрибут data-sync в значении которого нужно указать ID основного слайдера:

Таким образом мы свяжем наши слайдера. Остался последний шаг, это добавить JS код, который реализует данную задачу. Данный скрипт адаптивный и может обрабатывать не один слайдер на странице, а сразу несколько.

window.addEventListener('load', function () {
  function initSliders() {
    const sliders = document.querySelectorAll('[data-sync]');

    sliders.forEach(thumbnailsElement => {
      const mainSliderId = thumbnailsElement.getAttribute('data-sync');
      const mainSliderElement = document.getElementById(mainSliderId);

      const main = new Splide(mainSliderElement);
      const thumbnails = new Splide(thumbnailsElement);

      // Синхронизация слайдеров
      main.sync(thumbnails);

      // Монтируем слайдеры
      main.mount();
      thumbnails.mount();

      // Добавляем событие клика для миниатюр
      const thumbnailSlides = thumbnailsElement.querySelectorAll('.splide__slide');
      thumbnailSlides.forEach((slide, index) => {
        slide.addEventListener('click', () => {
          main.go(index); // Переход на соответствующий слайд в основном слайдере

          // Обновление активных классов
          thumbnailSlides.forEach(s => s.classList.remove('is-active')); // Удаляем активный класс у всех
          slide.classList.add('is-active'); // Добавляем активный класс текущему
        });
      });

      // Смена активного класса при перемещении слайдов
      main.on('move', (newIndex) => {
        thumbnailSlides.forEach(s => s.classList.remove('is-active')); // Удаляем активный класс у всех
        thumbnailSlides[newIndex].classList.add('is-active'); // Добавляем активный класс новому слайду
      });
    });
  }

  initSliders();
});

На этом всё. Стилизацию мы уже разберём в видео уроке.