Шторка или изображение "до" и "после"

В этой статье разберем как сделать шторку с изображением "до" и "после". Для реализации будем использовать плагин twentytwenty.

Скачиваем плагин, подключаем js и css файлы из архива. Также подключим jQuery и подготовим два изображения ("до" и "после") одинаковых размеров.

Создаем html конструкцию:

<div class="curtain">
	<img src="images/curtain_image_1.jpg">
	<img src="images/curtain_image_2.jpg">
</div>

Подключаем скрипт:

<script type="text/javascript">
	$(function() {
		$(".curtain").twentytwenty({
			default_offset_pct: 0.5, // Начальное положение шторки
			orientation: 'horizontal', // Движение шторки ("horizontal" или "vertical")
			before_label: 'До', // Подпись "до"
			after_label: 'После', // Подпись "после"
			no_overlay: false, // Не отображать оверлей для подписей "до" и "после"
			move_slider_on_hover: false, // Если true, то при наведении на блок сразу же активируется перетаскивание шторки
   			move_with_handle_only: true, // Перемещать шторку движением пальца
			click_to_move: true // Если true, то при нажатии на область с изображениями, шторка переместиться на место клика
		});
	});
</script>

И чтобы при загрузке страницы изображения не прыгали, добавим стили:

<style type="text/css">
	.curtain img{
		display: none;
	}
	.curtain.twentytwenty-container img{
		display: block;
	}
</style>