# Слайдер

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

![slider0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/slider0-menu.jpg)

</details>### Как выглядит блок?

[![slider1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider1-look.gif)

### Как работать с блоком?

Создайте блок и добавьте в него свои изображения. То изображение, которое вы загрузите первым, будет идти первым и в самом слайдере.

<p class="callout info">Рекомендуемый размер изображения — 1000 на 600 пикселей.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание блока</summary>

[![slider2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Вы можете выбрать, смогут ли ученики увеличить их при нажатии.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE%D0%B1"><summary>Настройка блока</summary>

[![slider3-popup.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider3-popup.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><p class="callout info">Совет: Если вы оставляете возможность для просмотра в полном размере включенной, то лучше не загружать в блок изображения с прозрачным фоном (такие изображения могут быть в формате png, gif, webp). Иначе при увеличении они не будут иметь фона.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81-%D0%BF%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D1%8B%D0%BC-"><summary>Пример с прозрачным фоном</summary>

[![image3-transparent.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как удалять и передвигать изображения?

Количество изображений в «**Слайдере**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить изображение**». Удалить ненужные изображения можно, нажав на значок «**Корзина**». А переместить можно, нажимая на **стрелки**.

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Перемещение и удаление изображений</summary>

[![slider4-order.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider4-order.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider4-order.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Подсказка

Вы можете изменить текст подсказки.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение текста подсказки</summary>

[![slider5-info.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider5-info.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon4-info.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- для пошаговых инструкций
- демонстрации какого-то процесса
- группировки изображений по одному принципу