Модуль “До/После” Чертоги фрилансера 3.0.0

Модуль “До/После” – это вывод 2-х изображений, с возможностью, перетаскивая разделяющую, линию отобразить одно или другое изображение.

Подключение

[HTML] В нужном месте вызвать ba ( классы можно заменить на нужные). Или вручную создать структуру с соответствующими дата-атрибутами

<div data-ba class="before-after">
	<div data-ba-before class="before-after__item">
	</div>
	<div data-ba-after class="before-after__item">
	</div>
	<div data-ba-arrow class="before-after__arrow"></div>
</div>

[JS] В файле js/app.js раскомментировать строку import ‘./libs/beforeafter.js’; Это же действие подключит файл столов scss/base/beforeafter.scss , содержащий, необходимые для работы модуля, базовые стили.

Использование

С помощью тега IMG добавьте изображения в соответствующие HTML-элементы, добавьте необходимую стилизацию для разделяющей линии

<div data-ba class="before-after">
	<div data-ba-before class="before-after__item">
		<img src="@img/before.jpg" alt="Before">
	</div>
	<div data-ba-after class="before-after__item">
		<img src="@img/before.jpg" alt="After">
	</div>
	<div data-ba-arrow class="before-after__arrow"></div>
</div>

.before-after__arrow{
	background-color: green;
	width: toRem(5);
}