# Наполнение слайдера на главной странице ## Инструкция по наполнению контентом слайдера на главной странице ### Общая характеристика Верстка карусели на главной странице находится в переменной "**slider-in-home-page"**. #### Zeta Web 2.x **Zeta Web → Панель управления сайтом →** вкладка **Наполнение сайта** → вкладка **Страницы/Переменные** → **Переменные.** #### Zeta Web 3.x **Zeta Web →Панель управления "Контент" → Сайты HTML.** ![](/files/-LaU_en0ZDMWOerLz4EL) В типовом дизайне представлены 5 изображений: * *с* областью для названия или описания слайда; * с кнопкой, при клике на которую осуществляется переход на нужную вам страницу; * также верстка подразумевает переход на необходимую страницу через клик на любую часть области слайда - для этого, каждому элементу с классом "carousel\_\_item\_link", требуется присвоить значение аттрибута "href" - указать адрес страницы. {% hint style="info" %} В верстке слайдера (на примере типового дизайна) каждый элемент с определенным классом встречается 5 раз - по количеству слайдов. \ Все, что находится внутри одного элемента с классом "carousel\_\_item" - относится к одному слайду. {% endhint %} ![](/files/-LaZaZsUBVLzwnxQVxjZ) Размеры блока-контейнера - **848\*480 px**. Соответственно, если вы хотите, чтобы изображение занимало всю отведенную ей область, выбирайте картинки или фото не меньше, указанных выше параметров. В слайдере **типового дизайна** используются картинки меньшего размера, чем родительский контейнер. Такое размещение тоже допустимо, изображения при этом будут центрироваться. *На примере ниже: синяя рамка - область внешнего контейнера и допустимого максимального размера изображения (848\*480 px). Красная рамка показывает реальные размеры текущей картинки.* ![](/files/-LaQjcRzOR_Knlc36Z-r) ### Редактирование слайдера Для изменения количества слайдов требуется, выделенную ниже на скриншоте, область -удалить или скопировать, и вставить в верстку, согласно порядку слайдов, наполнить необходимым текстовым контентом и добавить изображение. ![](/files/-LaZbbRGjNC77o4RwujG) ### Добавление изображения на слайд Добавление изображения на слайдер осуществляется в следующем порядке: * Прежде всего, необходимо добавить изображения слайдера в 1С. \ Для этого переходим в раздел "**Картинки и файлы**": выбираем или создаем папку, в которой будут храниться картинки слайдов. Добавление реализуется через клик на одноименную кнопку. * После того как картинки загружены в 1С, включим их в переменную **slider-in-home-page.** {% hint style="info" %} *Описан порядок добавления изображения на примере Zeta Web 2.x* {% endhint %} 1. Через кнопку "**Редактировать наполнение**" переходим к **визуальному редактору html:** ![](/files/-LaUa6KTnyXC44ebRRvW) 2\. Во вкладке "**Визуальный редактор HTML**" кликаем сначала по изображению, которое нужно заменить, далее через клик на кнопку с зеленым карандашом, переходим к непосредственному выбору новой картинки. ![](/files/-LaUbN5VqivXOSMEfdch) 3\. В окне "**Картинки (ZetaWeb)**" нажимаем на кнопку с тремя точками и выбираем ранее загруженное в 1С изображение слайдера в окне "**Файлы Zeta Web**". \ В поле **класс** - выбираем класс **.img-responsive**. \ Ширину и высоту картинки оставляем незаполненной, так как все необходимые стили и свойства уже заданы элементу, с указанным выше классом. ![](/files/-LaUdtYd5QkPc62_uKCp) 4\. Сохраняем результат, обмениваемся с сайтом. ### Добавление слайдера на страницу Добавление слайдера на страницу включает следующие этапы: #### Zeta Web 2.x По ссылке меню **Zeta Web → Панель управления сайтом** → вкладка **Наполнение сайта** → вкладка **Страницы / Переменные**. * Откройте окно редактирования наполнения страниц; * Выберите необходимую страницу и нажмите "Редактировать наполнение"; ![](/files/-LaULa3BtpP0dF4lM3T9) * В окне Визуального редактора HTML, через правую область нужно найти переменную **slider-home-page** и добавить перед переменной banners, если хотите, чтобы слайдер отображался выше баннеров (на примере типового дизайна), и, соответственно, под переменной - для отображения после. {% hint style="info" %} Рекомендуем сначала выделять(например, цифрами "1") во вкладке **р**едактора текста html ту область , в которую будет устанавливаться переменная, чтобы избежать ошибок верстки. После размещения переменной вспомогательные выделения (цифры) - удалить. {% endhint %} ![](/files/-LaUOhk8fyDAMwsDUdzu) ![Описанная верстка в редакторе html](/files/-LaUQs4eKAN4TyQlGnl1) * В завершении, удалите метки с цифрой "1", сохраните результат и обменяйтесь с сайтом. #### Zeta Web 3.x По ссылке меню **Zeta Web →Панель управления "Контент"** →вкладка **Наполнение сайта** → **Тексты HTML.** * Выберите необходимую страницу и нажмите "Редактировать текст HTML"; * В открывшемся окне повторно кликните на кнопку "Редактировать"; * Далее следует через правую область найти переменную **slider-home-page** и перетянууть ее перед переменной banners, если хотите, чтобы слайдер отображался выше баннеров (на примере типового дизайна), и, соответственно, под переменной - для отображения после. ![](/files/FKScQDe3VFtvIxRXl0Pq) * В завершении, сохраните результат и обменяйтесь с сайтом. На главной странице баннер будет выглядеть следующим образом: ![](/files/-LaURU-6CG2TzMsZIwFV) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/informacionnye-bloki-bannery-oprosy/napolnenie-slaidera-na-glavnoi-stranice.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.