Отредактировано: 15 Марта 2023

Большинство авторов описывают создание слайдера при помощи MIGX, но такой способ весьма не удобен, поскольку требует привязки к ресурсу. Куда более удобным компонентом для этих целей является BannerY, как всегда, от несравненного Василия Наумкина. 

Итак, для организации бэкэнд части слайдера понадобиться:

1. Установить дополнение BannerY;
2. Создать 2 чанка с шаблонами: шаблон для элемента и шаблон для обертки;
3. Зайти в меню Extras (Пакеты) в пункт BannerY;
4. В открывшемся окне перейти на 2 вкладку «Позиции» и создать новую позицию;
5. Перейти на 1 вкладку «Баннеры», и создать необходимое количество баннеров, задать каждому имя, изображение и выбрать специальную позицию;
6. Перейти в нужное место шаблона и вызвать сниппет 

   [[!BannerY?
         &tpl=`tpl.slider-item`
         &tplWrapper=`tpl.slider-wrap`
   ]]

Пример чанка tpl.slider-wrap

<div class="slider-block js-slider">
    [[+output]]
</div>

Пример чанка tpl.slider-item

<div class="slider-img-wrap">
        <img src="{$image}" alt="{$name}">
</div>

Не забудьте написать css и подключить скрипт слайдера в js файлах вашего сайта, например так:

<script src="/assets/templates/def/js/jquery-3.3.1.min.js"></script>
<script src="/assets/templates/def/js/slick.min.js"></script>
<script> $('.js-slider').slick({}); </script> 

Поля интерфейса «Баннеры» в компоненте BannerY:

• Название — любое название баннера, чтобы вам было удобно ориентироваться по ним в админке.
• Источник медиа — необязательный параметр. Картинки можно хранить на удалённых серверах, подключенных через источники медиа. По умолчанию будут местные файлы.
• Включен — переключатель активности баннера.
• Новое изображение — выберите предварительно загруженное изображение. Будут показаны файлы из выбранного источника.
• URL — место назначения баннера. Можно указывать страницы своего сайта или url - для этого нужно набрать адрес с http://.
• Текст баннера — любой произвольный текст, его можно будет вывести в подписи к баннеру.
• Позиции — выбор позиций, для которых показывается этот баннер. Их нужно создать предварительно в соседней вкладке.

Плейсхолдеры сниппета BannerY:

• [[++bannery_click]] — устанавливается в href параметр ссылки, отлавливает клик по баннеру;
• [[+adposition]] — номер баннера;
• [[+image]] — изображение;
• [[+name]] — название;
• [[+description]] — описание;
• [[+url]] — ссылка.

Тонкости при работе с BannerY:

В текущей версии компонента нет возможности выбрать в качестве ссылки на изображение сторонний ресурс. При указании ссылки на изображение, находящееся на другом сайте, перед ссылкой подставляется слэш. Самый легкий способ решения этой проблемы — использование модификатора в шаблоне вывода баннера:

// модификатор убирает первый слеш при выводе изображения на сайте
<img src="{$image | preg_replace : '~^/~': ''}"/>

Еще одна особенность работы компонента заключается в ссылке на несуществующую страницу сайта. Поисковики видят ссылки как /bannerclick/5?id=2246 и в отчетах жалуются на то, что эти страницы заблокированы файлом robots.txt, хотя страницы таковыми не являются. Чтобы исключить эти показания из отчетов, заблокируйте страницы в robots.txt

Disallow: /bannerclick/

Документация сниппета BannerY

Сниппет

[[!BannerY? &position=`2`]]