10 JQuery-слайдеров сравнения изображений
Специализированные слайдеры для сайта позволяют сопоставить два изображения, накладывая их друг на друга. В этой статье мы приводим список из 10 слайдеров сравнения изображений, которые помогут дизайнерам проще реализовать подобные эффекты. Это также отличный способ отображения эффекта от конкретного приема или подхода, примененного к изображению.
1. Twenty Twenty
Принцип работы плагина заключается в наложении двух изображений друг на друга. Когда слайдер для сайта перемещается по изображению, слева оно обрезается с помощью CSS. Это позволяет изображению справа отображаться в контейнере.
2. jQuery Sequency
Это JQuery плагин, который позволяет сравнивать различия между набором изображений, прокручивая один из вариантов вниз и вверх.
3. Before-after.js
Before-after.js - это простой и адаптивный слайдер для сайта html, который предназначен для сравнения изображений.
4. Juxtapose
JuxtaposeJS помогает сравнить две фотографии или GIF-файлы. Плагин идеально подходит для отображения изменений в хронологическом порядке, которые иллюстрируют медленные изменения во времени (городских пейзажей, лесных массивов и т.д.). А также вид до или после определенных драматических событий (стихийных бедствий, массовых беспорядков, войн и т.д.). Это бесплатный, простой в использовании инструмент, который работает на всех устройствах. Все, что вам нужно, это указать ссылки на изображения, которые вы хотите сравнить.
5. ImgSlider
JQuery плагин для создания простого слайдера для сайта, который предназначен для сравнения изображений. После подключения JS и CSS оберните изображение в элемент DIV с классом left, а изображение - с классом right. После чего активируйте плагин, вызвав метод .slider();
6. Image Comparison Slider
Image Comparison Slider - удобный слайдер для быстрого сравнения двух изображений на CSS3 и JQuery. Существует ряд эффективных решений интерфейса, которые на странице товара помогут пользователю лучше "прочувствовать" продукт. Image Comparison Slider один из них. Если вы посмотрите на страницу товаров телевизоров Sony Ultra HD, то увидите, что они используют этот скрипт слайдера для сайта, чтобы подчеркнуть разницу между разрешением их экрана и стандартным. Google использует его, чтобы продемонстрировать действие фильтров Google+ Photos.
7. Cocoen
Этот слайдер для сайта Jquery использует jQuery-Touch Event. Плагин прост в работе, так как он имеет HTML-структуру, похожую на плагин Twentytwenty. Для использования расширения кроме JQuery вам необходимо подключить библиотеку jQuery-Touch Event.
8. HTML5 Video Before and After Comparison Slider
Плагин для сравнения видео. Чтобы он работал, разработчик использовал JQuery и всего несколько строк кода. Просмотрите демо-версию на Codepen, чтобы увидеть слайдер в действии.
9. Double Viewer jQuery Plugin
Плагин позволяет сравнивать два разных изображения в одном слайдере. Double Viewer jQuery Plugin работает во всех основных браузерах и на мобильных устройствах. Перед тем, как сделать слайдер на сайте, в его настройках вы сможете задать любые цвета для курсора и разделительной линии, а также изменить их размер. Также плагин поддерживает несколько типов управления мышью.
10. jQuery Responsive oneByone Slider Plugin
Компактный, адаптивный, многоуровневый слайдер для сайта Javascript, который вы можете использовать для поэтапного отображения изображений и текста. CSS3-анимация управляется с помощью Animate.css, которая поддерживает перетягивание элементов на сенсорных экранах iPhone и IPad. Вы также можете перемещать элементы с помощью мыши. В последней версии добавлены дополнительные объекты, с помощью которых была реализована поддержка поэтапной анимации для каруселей Twitter Bootstrap.