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

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

Ранее уже была заметка с похожим слайдером: 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
20896 просмотров

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

Пошаговый слайдер

Оригинальный слайдер на jQuery, который листает карточки по кругу в одну сторону

3D-карусель Cloud 9 Carousel

jQuery/Zepto плагин Cloud 9 Carousel для создания 3D-карусели изображений или блоков

3D слайдер-карусель

Адаптивный 3D слайдер-карусель с 3-мя видимыми фотографиями

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

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

Станислав: 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

Для понимания приведу разметку: (стили кому нужно напишите), идея проста -- дектоп два контейнера внутри одного на гридах, на мобилка -- контейнеры накладываются друг на друга абсолютом, в принципе как и тут.
[code]
<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>
[/code]
[code]
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);
});
[/code]
Потом я подумал, что будет неплохо, если слушателей не будет на разрешениях где они не нужны. Поэтому кода стало чуть больше, стоит все вынести в именованные функции и на остальных разрешениях заремувить слушатели.

Более гуманный вариант скрипта:
[code]
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);
});
[/code]
Возможно поможет кому то (тезке что ниже спрашивал про разные разрешения)

Ответить
- Олег Матвеев: 17.02.2025 в 22:14
  
  Хотелось сохранить форматирование, но не судьба)
  
  Ответить
  - Alexander: 18.02.2025 в 08:27
    
    Поправил код
    У меня тут по олдскульному они, через BBCode 🙂
    
    Ответить
Toster: 12.11.2024 в 17:14

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

[code]
(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);
[/code]

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

[code]
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);
}
[/code]

Ответить
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
  
  Смотрите [i]jQuery UI Draggable [/i]
  
  Ответить
  - Олег: 27.04.2022 в 09:22
    
    Погуглил) Мало что понял)
    
    Ответить
Ростислав: 13.04.2022 в 14:30

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

Ответить
- Alexander: 13.04.2022 в 16:03
  
  Если не подключена, то [url="https://jquery.com/download/"]отсюда[/url]:
  
  Ответить
Kiso: 15.05.2020 в 17:24

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

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

Пример:

HTML:

CSS:

JS:

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

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

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