Слайдер до-после без использования плагинов
Слайдер до-после без использования плагинов
Сегодня рассмотрим как можно создать слайдер сравнения изображений (до/после) без использования плагинов с помощью 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');
Данный слайдер можно стилизовать как это необходимо
Полезные ссылки
- Шпаргалка по использованию jQuery
- Стилизация input type number
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.