JuxtaposeJS

Javascript'овый модуль JuxtaposeJS позволяет вставлять в сайт вот такие интересные штуки:

Код, приведенный ниже, реализует то, что вы видите выше.

<div class="juxtapose" data-startingposition="50" data-showlabels="true" data-showcredits="true" data-animate="true" data-mode="horizontal"> 
  <img src="img/before.jpg" data-label="Одна фотография" data-credit="Какой-то текст"> 
  <img src="img/after.jpg" data-label="Другая фотография" data-credit="Какой-то текст"> 
</div>

Как видно из кода в контейнере с классом class="juxtapose" присутствует ряд атрибутов, отвечающих за внешний вид слайдера, а именно:

• data-startingposition – Начальная позиция слайдера. Указывается число от 0 до 100. Начальная точка отображения границы изображения.
• data-showlabels – булевый тригер отвечающий за вывод, или невывод тайтлов в верхней части соответствующих изображений, задаваемых атрибутом data-label в тегах изображений. Может принимать значение true или false
• data-showcredits – так же булевый тригер, отвечающий за вывод "кредитов" перед и после модуля. Тот текст, что должен выводиться перед слайдером задается первой фотографии через атрибут data-credit, а тот текст, что должен выводиться после, во второй фотографии в том же атрибуте. Может принимать значение true или false
• data-animate – и это тоже булевый тригер, отвечающий за включение или отключение плавного перемещения границы отображения при клике по слайдеру. Может принимать значение true или false
• data-mode – выбор варианта реализации: вертикальный или горизонтальный. Может принимать одно из двух значений соответственно: vertical или horizontal

Да кстати - не забудьте вставить нижепреведенный код в нижнюю часть страницы, или хотя бы после блока, определяющего слайдер. Там стили и скрипты для отображения. Никаких дополнительных инициализаций делать не нужно, что нельзя не отметить.

<link rel="stylesheet" href="//cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css"> 
<script type="text/javascript" src="//cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.js"></script>

Лучше, конечно, хранить все используемые файлы у себя на сервере, так что вот вам ссылочки на скачку скриптов и стилей соответственно, а то с хаба выдерать не комельфо.

На всякий случай повторюсь - вся информация взята с сайта http://juxtapose.knightlab.com/