Разделенные изображения

Оригинальный эффект, позволяющий менять мышкой одну фотографию на другую по горизонтали или вертикали. Хорошо подойдет для показа изображений ДО и ПОСЛЕ или других парных картинок

Горизонтальный пример:

Slide

Вертикальный пример:

Slide

Установка:

Добавляем на сайт библиотеку jQuery, скрипт splitpic.js и его стили splitpic.css

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

HTML коды выглядят следующим образом:

Стрелочки сделаны шрифтом Font Awesome

Альтернативный вариант такого слайдера можно поглядеть в заметке: Слайдер "До" и "После" . Он отличается тем, что смена изображений в нем происходит по клику.

splitpic на github
Автор: Onion, Inc. tech team

1

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!