Эффект до и после на JQuery

Всем привет, в этой записи я вам покажу как сделать эффект до и после. Мы создадим слайдер из 2 изображений, которые будут переключаться с помощью флажка и создавать эффект изменения до и после.

Посмотреть как это работает можно здесь.

Демо

Для реализации данного эффекта мы будем использовать готовую библиотеку TwentyTwenty — https://github.com/zurb/twentytwenty

Для начала нам нужно скачать все необходимые файлы и подключить к своему проекту. Для подключения вам нужно скопировать код и поменять пути на свои.

<!--ПОДКЛЮЧАЕМ БИБЛИОТЕКУ JQUERY-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script> 
 
<!--ПОДКЛЮЧАЕМ ФАЙЛЫ TwentyTwenty --> 
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />

Теперь давайте добавим изображения которые будем использовать. В качестве контейнера можно использовать любой div с произвольным классом, в моем случае это container1.

<div id="container1">  
   <!-- Изображение "ДО" -->  
   <img src="http://before.png" />  
   <!-- Изображение "ПОСЛЕ" -->  
   <img src="http://after.png/" /> 
</div>

В самом низу кода необходимо разместить следующий скрипт.

$(function(){   
    $("#container1").twentytwenty(); 
});

Этого достаточно чтобы скрипт работал, теперь давайте рассмотрим дополнительные параметры.

Дополнительные параметры

$(function(){
    $("#container1").twentytwenty({
        default_offset_pct: 0.5, /* Какая часть изображения отображается при загрузке страницы*/
        orientation: 'horizontal', /* Ориентация фотографий('horizontal' or 'vertical')*/
        before_label: 'January 2017', /* Set a custom before label*/
        after_label: 'March 2017', /* Set a custom after label*/
        no_overlay: true, /*Не показывать наложение до и после*/
        move_slider_on_hover: false, /* Переместить ползунок при наведении мыши?*/
        move_with_handle_only: true, /* Позволяет пользователю проводить пальцем в любом месте изображения для управления движением ползунка.*/
        click_to_move: false /* Разрешить пользователю нажимать (или касаться) в любом месте изображения, чтобы переместить ползунок в это место.*/
    });
});