Бесплатные jQuery слайдеры сравнения изображений

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

Это отличный способ для дизайнеров и фотографов, чтобы показать свои навыки обработки фотографий или иллюстраций.

TwentyTwenty

Визуальный инструмент для сравнения двух изображений. Работает на jQuery и jquery.event.move. Очень прост в использовании, достаточно просто поместить два изображения в контейнер и вызвать функцию twentytwenty();

<div id="container">
  <img src="/img-before.png">
  <img src="/img-after.png">
</div>

Вызов функции:

$("#container").twentytwenty();

Кастомизация

Вы можете настроить внешний вид jQuery слайдера используя SASS и следующие переменные:

NameDefault Value
$pluginPrefix twentytwenty
$twenty20-handle-color #fff
$twenty20-handle-stroke 3px
$twenty20-handle-circle-width 38px
$twenty20-handle-box-shadow 0px 0px 12px rgba(#333,0.5)
$twenty20-handle-triangle-color $twenty20-handle-color
$twenty20-handle-triangle-size 6px
$twenty20-handle-triangle-position 5px
$twenty20-handle-radius 1000px
$twenty20-overlay-bg rgba(#000,0.5)
$twenty20-overlay-label-color #fff
$twenty20-overlay-label-bg rgba(#fff, .2)
$twenty20-overlay-label-height 38px
$twenty20-overlay-label-padding 20px
$twenty20-overlay-label-font-size 13px
$twenty20-overlay-label-letter-spacing 0.1em
$twenty20-label-radius 2px

Слайдер полностью адаптирован и работает на всех устройствах

Juxtapose

Juxtapose поможет вам сравнить два изображения (фотография или GIF), чтобы определить разницу между изображениями. Плагин очень прост в использовании и работает на всех устройствах. Просто добавьте два изображения, а затем настроите вызов плагина с доступными опциями.

В опциях вы сможете настроить позицию центральной линии, сменить ориентацию (вертикально или горизонтально), добавить метки, описание и многое другое.

imgSlider

imgSlider простой JQuery плагин, для сравнения изображений. Очень прост в использовании: подключаете js и css файлы, добавляете изображения в контейнер с соответствующим классом - left image или right image, а затем создаете вызов функции .slider();. В опциях вы сможете настроить начальное положение центральной линии и отображение подсказок.

<div class="slider responsive">
    <div class="left image">
        <img src="/before.jpg"/>
    </div>
    <div class="right image">
        <img src="/after.jpg"/>
    </div>
</div>

Вызов плагина:

$('.slider').slider();

Cocoen

Cocoen имеет поддержку jQuery-Touch Event. Очень простая HTML структура, схожая с Twentytwenty. Помимо JQuery необходимо подключить библиотеку jQuery Touch Event.

<div class="cocoen">
    <img src="/img/before.jpg" alt="">
    <img src="/img/after.jpg" alt="">
</div>
 
$(document).ready(function(){
    $('.cocoen').cocoen();
});

Перевод статьи 5 Free Image Comparison Slider Scripts

Тэги: sliderplugin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.