Слайдер до-после без использования плагинов
Сегодня рассмотрим как можно создать слайдер сравнения изображений (до/после) без использования плагинов с помощью JavaScript и jQuery.
Демонстрация

Разметка. Обёртка с id image-comparison и двумя изображениями. Подключим jQuery

<div id="image-comparison">
    <img src="./img/1.jpeg" alt="alt">
    <img src="./img/2.jpeg" alt="alt">
</div>

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

Стили

.image-comparison {
    position: relative;
    display: inline-block;
    width: 520px;
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}

.image-comparison__before {
    position: absolute;
    width: 50%;
    overflow: hidden;
}

.image-comparison__image {
    display: block;
}

/* Ползунок */
.image-comparison__slider {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 100%;
    cursor: col-resize;
    outline: none;
    border: none;
}

/* Стрелки */
.image-comparison__slider::before {
    content: '';
    position: absolute;
    top: calc(50% - 15px);
    left: -14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent url('./img/arrows.png') no-repeat center;
    border: 2px solid #fff;
    background-size: 90%;
}

.image-comprison__slider:hover,
.image-comprison__slider:focus,
.image-comprison__slider:hover::before,
.image-comprison__slider:focus::before {
    background-color: #ccc;
    outline: none;
    border: none;
}

JavaScript

function imageComparison(selector) {

    let comparison = $(selector)
        .addClass('image-comparison')
        .prepend('<div class="image-comparison__before"></div>')
        .append('<button class="image-comparison__slider"></button>');

    let images = comparison
        .find('img')
        .addClass('image-comparison__image')
        .css('max-width', comparison.width());

    let before = comparison
        .find('.image-comparison__before')
        .append(images.eq(0));

    comparison
        .find('.image-comparison__slider')
        .on('dragstart', () => false) // отмена станд. drug&drop

        .on('mousedown', function(e) {
            let slider = $(this);
            let doc = $(document).on('mousemove', (e) => {
                let offset = e.pageX - comparison.position().left;
                let width = comparison.width();

                // установим границы, чтобы ползунок не выходил

                if (offset < 0) offset = 0;
                if (offset > width) offset = width;

                slider.css('left', offset + 'px');
                before.css('width', offset + 'px');
            });

            doc.on('mouseup', () => doc.off('mousemove'));
        });
};

imageComparison('#image-comparison');
Демонстрация

Данный слайдер можно стилизовать как это необходимо

Полезные ссылки

Админ admin
» »