Слайдер для смены двух фотографий

Ранее уже были похожие слайдеры:

Этот вариант не требует никаких библиотек и умещается в несколько строчек

Пример:

HTML:

<div class="banner-wrapper" id="banner-wrapper">
	<div class="banner">
		<div class="banner-content">
			<img src="car-1.jpg">
		</div>
	</div>
	<div class="banner dev">
		<div class="banner-content">
			<img src="car-2.jpg">
		</div>
	</div>
</div>

</div>

</div>

CSS:

.banner-wrapper {
	position: relative;
	overflow: hidden;
	height: 500px;
	margin: 20px 0;
}
.banner {
	position: absolute;
	overflow: hidden;
}
.banner.dev {
	transform: skew(-30deg);
	margin-left: -200px;
	width: calc(50% + 200px);
	transition: all 300ms ease-out;
}
.banner.dev .banner-content {
	transform: skew(30deg);
	margin-left: 200px;
}
.banner .banner-content {
	height: 500px;
}
.banner .banner-content img {
	max-width: none;
}

.banner-wrapper {

position: relative;

overflow: hidden;

height: 500px;

margin: 20px 0;

}

.banner {

position: absolute;

overflow: hidden;

}

.banner.dev {

transform: skew(-30deg);

margin-left: -200px;

width: calc(50% + 200px);

transition: all 300ms ease-out;

}

.banner.dev .banner-content {

transform: skew(30deg);

margin-left: 200px;

}

.banner .banner-content {

height: 500px;

}

.banner .banner-content img {

max-width: none;

}

JS:

document.addEventListener('DOMContentLoaded', function(){
    let banner = document.getElementById('banner-wrapper');
    let devLayer = banner.querySelector('.dev');
    let delta = 0;
    banner.addEventListener('mousemove', function(e){
        delta = ((e.pageX - banner.getBoundingClientRect().left) - banner.offsetWidth / 2) * 0.5;
        devLayer.style.width = (e.pageX - banner.getBoundingClientRect().left) + 200 + delta + 'px';
	});
})

document.addEventListener('DOMContentLoaded', function(){

let banner = document.getElementById('banner-wrapper');

let devLayer = banner.querySelector('.dev');

let delta = 0;

banner.addEventListener('mousemove', function(e){

delta = ((e.pageX - banner.getBoundingClientRect().left) - banner.offsetWidth / 2) * 0.5;

devLayer.style.width = (e.pageX - banner.getBoundingClientRect().left) + 200 + delta + 'px';

});

})

За основу взят код, найденный на codepen.io у пользователя Brett McCaffray
Автор фотографий LeeRosario

Пример:

HTML:

CSS:

JS:

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

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