Компонент “До/После” – это вывод 2х изображений, с возможностью, перетаскивая разделяющую, линию отобразить одно или другое изображение.
Расположение компонента
Файлы компонента находятся в папке src/components/layout/beforeafter, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
В HTML, в нужном месте, вызвать снипет ba (классы можно заменить нужными). Или вручную создать структуру с соответствующими дата-атрибутами.
<div data-fls-beforeafter class="before-after"><div data-fls-beforeafter-before class="before-after__item">...</div><div data-fls-beforeafter-after class="before-after__item">...</div><div data-fls-beforeafter-arrow class="before-after__arrow"></div></div>С помощью тега IMG добавьте загрязнения в соответствующие HTML-элементы, добавьте необходимую стилизацию для разделяющей линии data-fls-beforeafter-arrow
<div data-fls-beforeafter class="before-after"><div data-fls-beforeafter-before class="before-after__item"><img src="@img/image-1.jpg" alt="Изображение"></div><div data-fls-beforeafter-after class="before-after__item"><img src="@img/image-2.jpg" alt="Изображение"></div><div data-fls-beforeafter-arrow class="before-after__arrow"></div></div>