Слайдер "До" и "После"

Данный слайдер накладывает две фотографии друг на друга и заменяет их движением мыши.

Ранее уже была заметка с похожим слайдером: splitpic.js

Отличаются они тем, что этот скрипт работает по клику мышки, а не по ее движению, как splitpic.js

Пример:

Функцию animateTo("значение") (о ней ниже) можно использовать для перемещения ползунка в нужное место и использовать на кнопках или в тексте. Например:

Когда мы лазали зимой в горах, нам хотелось лета (на лето нужно кликнуть)

HTML:

<div class="sl-container">
	<div class="view view-after">
		<img src="winter.jpg"/>	  
	</div>
	<div class="view view-before">
		<img src="summer.jpg"/>
	</div>
	<div class="dragme"><div class="dr-circle"><i class="fa fa-arrows-h" aria-hidden="true"></i></div></div>
</div>

</div>

</div>

</div>

Стрелочки сделаны шрифтом Font Awesome

CSS:

.sl-container {
	border: 10px solid #BFE2FF;
	margin: 20px auto;
	overflow: hidden;
	position: relative;
    width: 640px;
	height: 420px;
	box-sizing: border-box;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.sl-container .view {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.sl-container .view img {
	width: 640px;
	max-width: 640px;
}
.sl-container .view-before {
	z-index: 100;
}
.sl-container .view-after {
	width: 100px;
	z-index: 200;
}
.sl-container .dragme {
	position: absolute;
	width: 10px;
	height: 100%;
	top: 0px;
	left: 100px;
	background-color: #BFE2FF;
	cursor: pointer;
	z-index: 300;
}
.sl-container .dr-circle {
	position: absolute;
	top: calc(50% - 20px);
	left: -15px;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	text-align: center;
	background-color: #BFE2FF;
	cursor: pointer;
	z-index: 300;
}
.sl-container .dr-circle i {
	line-height: 40px;
	font-size: 20px;
	color: #337AB7;
	font-weight: bold;
}
@media screen and (max-width: 600px) {
	.sl-container {
		width: 320px;
		height: 210px;
	}
	.sl-container .view img {
		width: 320px;
		max-width: 320px;
	}
}

.sl-container {

border: 10px solid #BFE2FF;

margin: 20px auto;

overflow: hidden;

position: relative;

width: 640px;

height: 420px;

box-sizing: border-box;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.sl-container .view {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

}

.sl-container .view img {

width: 640px;

max-width: 640px;

}

.sl-container .view-before {

z-index: 100;

}

.sl-container .view-after {

width: 100px;

z-index: 200;

}

.sl-container .dragme {

position: absolute;

width: 10px;

height: 100%;

top: 0px;

left: 100px;

background-color: #BFE2FF;

cursor: pointer;

z-index: 300;

}

.sl-container .dr-circle {

position: absolute;

top: calc(50% - 20px);

left: -15px;

border-radius: 100%;

width: 40px;

height: 40px;

text-align: center;

background-color: #BFE2FF;

cursor: pointer;

z-index: 300;

}

.sl-container .dr-circle i {

line-height: 40px;

font-size: 20px;

color: #337AB7;

font-weight: bold;

}

@media screen and (max-width: 600px) {

.sl-container {

width: 320px;

height: 210px;

}

.sl-container .view img {

width: 320px;

max-width: 320px;

}

JS:

Подключаем jQuery (если не подключено ранее)
Подключаем jQuery UI для вашей версии jQuery с взаимодействием Draggable или полную. Для jQuery 1.7+ можно использовать эту.
Подключаем приведенный ниже код

(function($) {
    var $dragMe = $(".dragme"),
	$container = $(".sl-container"),
	$viewAfter = $(".view-after");
    $dragMe.draggable({
        containment: "parent",
        drag: function() {
            $viewAfter.css({
                width : parseFloat($(this).css('left')) + 5
			});
		}
	});
    $container.on("click", function(event) {
        var eventLeft = event.pageX - $container.offset().left - 15;
        animateTo(eventLeft);
	});
    animateTo("50%");
    function animateTo(_left) {
        $dragMe.animate({
            left: _left
		}, 'slow', 'linear');
        $viewAfter.animate({
            width: _left
		}, 'slow', 'linear');
	}
})(jQuery);

(function($) {

var $dragMe = $(".dragme"),

$container = $(".sl-container"),

$viewAfter = $(".view-after");

$dragMe.draggable({

containment: "parent",

drag: function() {

$viewAfter.css({

width : parseFloat($(this).css('left')) + 5

});

}

});

$container.on("click", function(event) {

var eventLeft = event.pageX - $container.offset().left - 15;

animateTo(eventLeft);

});

animateTo("50%");

function animateTo(_left) {

$dragMe.animate({

left: _left

}, 'slow', 'linear');

$viewAfter.animate({

width: _left

}, 'slow', 'linear');

}

})(jQuery);

Если нет желания использовать jQuery UI, который обеспечивает перетаскивание ползунка мышкой, можно его не подключать. В этом случае слайдер будет меняться только по клику на нем мышки. Для этого нужно удалить код:

$dragMe.draggable({
	containment: "parent",
	drag: function() {
		$viewAfter.css({
			width: $(this).css('left')
		});
	}
});

$dragMe.draggable({

containment: "parent",

drag: function() {

$viewAfter.css({

width: $(this).css('left')

});

}

});

Для перемещения ползунка в нужное место используется функция animateTo("значение")

$(".zima").hover(function(){
	animateTo("100%");
})	
$(".leto").click(function(){
	animateTo(-10);
})

$(".zima").hover(function(){

animateTo("100%");

})

$(".leto").click(function(){

animateTo(-10);

})

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

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

Опубликовано: 19.08.2019
Рубрики: Слайдеры и карусели
Метки: jQuery, jQuery UI
19387 просмотров

Небольшой скрипт на jQuery реализующий слайдер со сменой по диагонали фотографий

Карусель только для малых экранов

Пример подключения карусели для блоков только на мобильные экраны

3D карусель изображений

Вращающаяся по кругу 3D карусель изображений на CSS и JavaScript

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

Ваш комментарий отправлен!

Станислав: 27.04.2025 в 09:20

Здравствуйте! Подскажите, как с фильтрами совместить? <div class="sl-container">
Я отсюда: https://atuin.ru/blog/filtr-dlya-fotografij-na-webgl
Пробовал вот так:

<div class="sl-container">
<div class="view view-after">
<canvas id="image-filter-canvas"></canvas>
</div>
<div class="view view-before">
<img src="/img/3d/1.jpg"/>
</div>
<div class="dragme"><div class="dr-circle"><i class="fa fa-arrows-h" aria-hidden="true"></i></div></div>
</div>
не выходит)

Ответить
- Alexander: 27.04.2025 в 10:43
  
  Дайте ссылку на результат
  
  Ответить
  - Станислав: 27.04.2025 в 14:53
    
    Всё хорошо. Не знаю, что мне померещилось спросонья... Но я думал что-то сделал не так я. Наверное не совсем проснулся, сразу за ноут и на Ваш сайт. Спасибо за Ваши труды! Всё просто супер на Вашем сайте! С праздником !
    
    Ответить

Олег Матвеев: 17.02.2025 в 22:13

Понадобилось давече наложить один список на другой (смысл такой же как с картинками) на мобильном разрешении, а на дектопе контейнеры списков были друг на против друга. По другому никак иначе смысл перечней терялся. Вдохновился данным подходом, но jquery-ui даже в урезанном и минифицированном виде оказалась великовата. Кроме того, исользовать все нужно было только на одной странице сайта. В итого, родилось следующее -- все то же самое, но без jquery

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

<div class="paradigm__lists">
	<ul class="paradigm__list paradigm__list--black view-after">
		<li>Some first text</li>
	</ul>
	<ul class="paradigm__list paradigm__list--grey view-before">
		<li>Some second text</li>
	</ul>
	<div class="dragme-line"><div class="dr-circle"></div></div>
</div>

document.addEventListener('DOMContentLoaded', () => {
	const dragMe = document.querySelector(".dragme-line");
	const container = document.querySelector(".paradigm__lists");
	const viewAfter = document.querySelector(".view-after");
	function init() {
		if (window.innerWidth < 768) {
			let isDragging = false;
			let offsetX = 0;
			dragMe.addEventListener("mousedown", (event) => {
				isDragging = true;
				offsetX = event.clientX - dragMe.offsetLeft;
			});
			window.addEventListener("mousemove", (event) => {
				if (!isDragging) return;
				const x = event.clientX - offsetX - container.offsetLeft;
				const boundedX = Math.max(0, Math.min(x, container.offsetWidth - dragMe.offsetWidth));
				dragMe.style.left = boundedX + "px";
				viewAfter.style.width = boundedX + 5 + "px";
			});
			window.addEventListener("mouseup", () => {
				isDragging = false;
			});
			container.addEventListener("click", (event) => {
				const eventLeft = event.pageX - container.offsetLeft - 15;
				animateTo(eventLeft);
			});
			animateTo("50%");
			function animateTo(left) {
				const targetLeft = left.toString().includes("%") ? left : left + "px";
				dragMe.style.transition = "left 0.5s linear";
				viewAfter.style.transition = "width 0.5s linear";
				
				dragMe.style.left = targetLeft;
				viewAfter.style.width = targetLeft;
				
				setTimeout(() => {
					dragMe.style.transition = "";
					viewAfter.style.transition = "";
				}, 500);
			}
		}
	}
	init();
	window.addEventListener('resize', init);
});

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

Более гуманный вариант скрипта:

document.addEventListener('DOMContentLoaded', () => {
	const dragMe = document.querySelector(".dragme-line");
	const container = document.querySelector(".paradigm__lists");
	const viewAfter = document.querySelector(".view-after");	
	let isDragging = false;
	let offsetX = 0;
	function init() {
		if (window.innerWidth < 768) {
			dragMe.addEventListener("mousedown", dragStart);
			window.addEventListener("mousemove", dragging);
			window.addEventListener("mouseup", dragEnd);
			container.addEventListener("click", containerClick);		
			animateTo("50%");
			} else {
			dragMe.removeEventListener("mousedown", dragStart);
			window.removeEventListener("mousemove", dragging);
			window.removeEventListener("mouseup", dragEnd);
			container.removeEventListener("click", containerClick);			
			dragMe.style.left = "";
			viewAfter.style.width = "";
		}
	}	
	function dragStart(event) {
		isDragging = true;
		offsetX = event.clientX - dragMe.offsetLeft;
	}	
	function dragging(event) {
		if (!isDragging) return;
		const x = event.clientX - offsetX - container.offsetLeft;
		const boundedX = Math.max(0, Math.min(x, container.offsetWidth - dragMe.offsetWidth));
		dragMe.style.left = boundedX + "px";
		viewAfter.style.width = boundedX + 5 + "px";
	}	
	function dragEnd() {
		isDragging = false;
	}	
	function containerClick(event) {
		const eventLeft = event.pageX - container.offsetLeft - 15;
		animateTo(eventLeft);
	}	
	function animateTo(left) {
		const targetLeft = left.toString().includes("%") ? left : left + "px";
		dragMe.style.transition = "left 0.5s linear";
		viewAfter.style.transition = "width 0.5s linear";
		dragMe.style.left = targetLeft;
		viewAfter.style.width = targetLeft;
		setTimeout(() => {
			dragMe.style.transition = "";
			viewAfter.style.transition = "";
		}, 500);
	}	
	init();
	window.addEventListener('resize', init);
});

Возможно поможет кому то (тезке что ниже спрашивал про разные разрешения)

Ответить

Олег Матвеев: 17.02.2025 в 22:14

Хотелось сохранить форматирование, но не судьба)

Ответить
- Alexander: 18.02.2025 в 08:27
  
  Поправил код
  У меня тут по олдскульному они, через BBCode 🙂
  
  Ответить

Toster: 12.11.2024 в 17:14

поправил немного код, чтобы работал если на странице несколько слайдеров

(function($) {
	$('.sl-container').each(function() {
		var $container = $(this),
		$dragMe = $container.find('.dragme'),
		$viewAfter = $container.find('.view-after');
		$dragMe.draggable({
			containment: "parent",
			drag: function() {
				$viewAfter.css({
					width: parseFloat($(this).css('left')) + 5
				});
			}
		});
		$container.on("click", function(event) {
			var eventLeft = event.pageX - $container.offset().left - 15;
			animateTo(eventLeft, $dragMe, $viewAfter);
		});
		animateTo("50%", $dragMe, $viewAfter);
		function animateTo(_left, $dragMe, $viewAfter) {
			$dragMe.animate({
				left: _left
			}, 'slow', 'linear');
			$viewAfter.animate({
				width: _left
			}, 'slow', 'linear');
		}
	});
})(jQuery);

и чтобы размеры изображений подгонялись под блок

function adjustImageWidth() {
	(function($) {
		$('.sl-container').each(function() {
			var $viewBefore = $(this);
			var width = $viewBefore.width();
			var height = $('.view-before').height();
			$viewBefore.find('.view-before img').css('width', width);
			$viewBefore.find('.view-after img').css('width', width);
			$('.sl-container').css('height', height);
		});
	})(jQuery);
}

Ответить

Kirа: 28.10.2024 в 11:27

"Подключаем jQuery"
Это как сделать?
И вообще куда коды вставлять в какое место. Можно поподробнее

Ответить
- Alexander: 28.10.2024 в 11:49
  
  Никак не соберусь написать помощь по установке...
  Подключается как и любой скрипт, а как остальное я даже не знаю как в 2х словах написать..
  Напишите в ТГ или ВК, попробую подсказать.
  
  Ответить
  - Kirа: 28.10.2024 в 13:46
    
    Да хотя бы на примере пустого сайта.
    Скачать то то (такие то файлы)
    положить в папки такие то
    в файле таком то прописать то то
    в файл таком то прописать то то
    А лучше просто архивчик пустого сайта с одной страницей и этим скриптом
    
    Ответить
Шайлтан вор: 12.07.2023 в 13:42

Класно, спасибо сворую на совй веб сайт

Ответить
Олег: 26.04.2022 в 19:30

А как сделать, чтобы ползунок работал и в мобильной версии? Это возможно?

Ответить
- Alexander: 26.04.2022 в 21:42
  
  Смотрите jQuery UI Draggable
  
  Ответить
  - Олег: 27.04.2022 в 09:22
    
    Погуглил) Мало что понял)
    
    Ответить
Ростислав: 13.04.2022 в 14:30

С помощью какой команды нужно включить jQuery?

Ответить
- Alexander: 13.04.2022 в 16:03
  
  Если не подключена, то отсюда:
  
  Ответить
Kiso: 15.05.2020 в 17:24

Как добавить два и больше таких слайдера на 1 страницу ? и что бы при этом каждый слайдер работал независимо от других, сейчас если добавить 2 таких на 1 страницу то при смещении одного смещается и другой

Ответить
- Nick: 02.09.2021 в 22:29
  
  Добавить 2 скрипта, 2 html блока с разными названиями и в скриптах соответственно
  
  Ответить

Пример:

HTML:

CSS:

JS:

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

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

Комментарии: