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" присутствует ряд атрибутов, отвечающих за внешний вид слайдера, а именно:
Да кстати - не забудьте вставить нижепреведенный код в нижнюю часть страницы, или хотя бы после блока, определяющего слайдер. Там стили и скрипты для отображения. Никаких дополнительных инициализаций делать не нужно, что нельзя не отметить.
<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/