Как исправить функционал ползунка для смены фото работу которого ломает подключение карусели?
Есть ползунок который позволяет скрывать-открывать изображения до-после.
Хочу сделать карусель из большего количества такого плана слайдов, но при подключении slick слайдера
ломается функционал ползунка и теперь получается только одномоментная резкая односторонняя смена изображений.
Пробую убрать тач событие с самих слайдов (достаточно переключения слайдов по буллетам), чтобы работал нативный функционал ползунка, но пока из этого ничего не выходит, нужна помощь.
Код слайдера с ползунками
$(document).ready(function() {
$('#comparison-carousel').slick({
infinite: true,
//swipe: false,
//swipeToSlide: 'false',
//accesibility: false,
//draggable: false,
touchMove: false,
slidesToScroll: 1,
mobileFirst: true,
dots: true,
arrows: false,
responsive: [{
breakpoint: 0,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 3,
}
}
]
});
});
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");
imageComparison("#image-comparison2");
imageComparison("#image-comparison3");
imageComparison("#image-comparison4");
.img-fluid {
max-width: 100%;
height: auto;
}
.image-comparison {
position: relative;
overflow: hidden;
margin-bottom: 70px;
}
#comparison .slick-dots {
text-align: center;
}
.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;
cursor: col-resize;
outline: none;
border: none;
}
/* Стрелки */
.image-comparison__slider::before {
content: "";
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
width: 40px;
height: 40px;
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAARVBMVEX///8AAACTk5P8/Pze3t7p6emAgIDl5eXh4eGEhISKioqOjo4rKyvs7OwZGRkHBwcfHx8kJCR5eXnY2NigoKAaGhoRERGOZdFBAAADW0lEQVR4nO3cYW/qMAyF4XhrKTBoYWz8/596GWIb0CaZdYuNj877fVIexWkBdU2JMcYYY4wxxhhjjDHGGGOMMcaYW6/eC3h07wfvFTy4lTTeS3hsCwEXnoDYwpWAC89AZOFCwIUXIK5wJeDCHyCq8BcIKrwCYgrXAi683kFI4S0QULgWcOE9EE44AqIJx0Aw4dsYiCWc2EEs4SQQSTgNBBJOnUEoYWYHcYRZIIowN6IwwgIQQ1gCQgiLQAThSxEIICzvIICwBpTOe4X/WRUoi5dZswZWzuADMgbWdzC40AFoK7QfUWOhC9BS6AM0FDoB7YReQDOhG9BK6Ac0En74AY2E7RFdmLYbdGFq3YhWwrTt0YVpu0MXeg2qoTC1e3Rh2sIL09ZhF22FHmfRWJha85uGtfAPH+AO6XXOzIX1K2r437xTVyHGF6YWXli53CAIy4MKIUzdJ7qwdBZBhKnNfplCEaYuR4QRpm6IKOw0y8sQn1vYqNY3PajPLhw0C1xO3fqfXShH1S5GFIosFX/Qjb9MBRCq1rgcncUIQtWgLu+vqBGEMqgGNaJQeRb7iELVTaPpAwqlV53FiELdoC5DClXEq0ENJFQNajMEFEqveRh2GVGoe973+9YfS6i69TfHgELZqYgRhXJUn8VoQt1Z/BrUeMJeNahDQKHsVLsYUSiDivjc/1EyLdQRn7uMUDeoT11OKLvWe2kzlRWKgBALwk+MQS0IZQ9BLAmlRxjUohDiLFaEAINaEcreYRfnfYbsUBHK0Z5YW9Lc2V9urIWysSaaC2W/RReK2BI9hLZXVA+h7Vl0EcrOcFB9hNLbEZ2EhoPqJZSN1S66Cc0+wPkJ5QNdaPXmGHigm9Du3T/wQCeh5dub4IEuQtv3bzkA30yBDkJjoL3Q/hVxs7aoAq13cO6mnr2HAlZ/8w4PrAnNz+D8lYXxd7AiRAAWhRDAkhADWBCuvZc2U1khCjArBBnRlBXC7GBOCAScFiIBJ4U4Z/CrCSHUDk4JwYBjIRpwJIQD3gtX3uuZvwYdeCvEG9F0K0TcwRshJvBKCAr8FaICf4QL74U8rAYdeBHCjmi6CJGBZyHwiKazEBt4EkKP6KnDu/cKHp3De4kZY4wxxhhjjDHGGGOMMcYYY4x99w+juSvDzdAgZgAAAABJRU5ErkJggg==") no-repeat center;
background-size: cover;
}
.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div id="comparison-carousel">
<div>
<div id="image-comparison">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e6a/e6a224ebbace87260f550a6a0e152f57_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e75/e75686b6572485306bc0c16bd2b77a5c_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
</div>
</div>
<div>
<div id="image-comparison2">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/ca7/ca71fad8869b1018ddf573a6a6438391_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/286/286895ba056ca1bbe8eaeb9151335235_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
</div>
</div>
<div>
<div id="image-comparison3">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/70f/70f72068248b5a9cf4bfaffbd6c67214_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/8ae/8ae6352483b873219b4023a4aeede69f_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
</div>
</div>
<div>
<div id="image-comparison4">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/44b/44bd45b92bee48008cbe6c2aaf7ded2b_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/631/631d3a4c9e39d866437b0b931eab2fb1_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
</div>
</div>
</div>
Ответы (1 шт):
Это не связано с touch-событиями, а лишь с слайдером. Из-за добавления элементов в начале - некорректно считается размер смещения.
let offset = e.pageX - comparison.position().left
- будет всегда равен 0 из-за того, что comparison.position().left
намного больше.
Вместо того чтобы использовать comparison.position().left
, который считает от родительского элемента - используйте comparison[0].getBoundingClientRect().left
, который считает в рамках экрана
$(document).ready(function() {
$('#comparison-carousel').slick({
infinite: true,
//swipe: false,
//swipeToSlide: 'false',
//accesibility: false,
//draggable: false,
touchMove: false,
slidesToScroll: 1,
mobileFirst: true,
dots: true,
arrows: false,
responsive: [{
breakpoint: 0,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 3,
}
}
]
});
});
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[0].getBoundingClientRect().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");
imageComparison("#image-comparison2");
imageComparison("#image-comparison3");
imageComparison("#image-comparison4");
.img-fluid {
max-width: 100%;
height: auto;
}
.image-comparison {
position: relative;
overflow: hidden;
margin-bottom: 70px;
}
#comparison .slick-dots {
text-align: center;
}
.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;
cursor: col-resize;
outline: none;
border: none;
}
/* Стрелки */
.image-comparison__slider::before {
content: "";
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
width: 40px;
height: 40px;
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAARVBMVEX///8AAACTk5P8/Pze3t7p6emAgIDl5eXh4eGEhISKioqOjo4rKyvs7OwZGRkHBwcfHx8kJCR5eXnY2NigoKAaGhoRERGOZdFBAAADW0lEQVR4nO3cYW/qMAyF4XhrKTBoYWz8/596GWIb0CaZdYuNj877fVIexWkBdU2JMcYYY4wxxhhjjDHGGGOMMcaYW6/eC3h07wfvFTy4lTTeS3hsCwEXnoDYwpWAC89AZOFCwIUXIK5wJeDCHyCq8BcIKrwCYgrXAi683kFI4S0QULgWcOE9EE44AqIJx0Aw4dsYiCWc2EEs4SQQSTgNBBJOnUEoYWYHcYRZIIowN6IwwgIQQ1gCQgiLQAThSxEIICzvIICwBpTOe4X/WRUoi5dZswZWzuADMgbWdzC40AFoK7QfUWOhC9BS6AM0FDoB7YReQDOhG9BK6Ac0En74AY2E7RFdmLYbdGFq3YhWwrTt0YVpu0MXeg2qoTC1e3Rh2sIL09ZhF22FHmfRWJha85uGtfAPH+AO6XXOzIX1K2r437xTVyHGF6YWXli53CAIy4MKIUzdJ7qwdBZBhKnNfplCEaYuR4QRpm6IKOw0y8sQn1vYqNY3PajPLhw0C1xO3fqfXShH1S5GFIosFX/Qjb9MBRCq1rgcncUIQtWgLu+vqBGEMqgGNaJQeRb7iELVTaPpAwqlV53FiELdoC5DClXEq0ENJFQNajMEFEqveRh2GVGoe973+9YfS6i69TfHgELZqYgRhXJUn8VoQt1Z/BrUeMJeNahDQKHsVLsYUSiDivjc/1EyLdQRn7uMUDeoT11OKLvWe2kzlRWKgBALwk+MQS0IZQ9BLAmlRxjUohDiLFaEAINaEcreYRfnfYbsUBHK0Z5YW9Lc2V9urIWysSaaC2W/RReK2BI9hLZXVA+h7Vl0EcrOcFB9hNLbEZ2EhoPqJZSN1S66Cc0+wPkJ5QNdaPXmGHigm9Du3T/wQCeh5dub4IEuQtv3bzkA30yBDkJjoL3Q/hVxs7aoAq13cO6mnr2HAlZ/8w4PrAnNz+D8lYXxd7AiRAAWhRDAkhADWBCuvZc2U1khCjArBBnRlBXC7GBOCAScFiIBJ4U4Z/CrCSHUDk4JwYBjIRpwJIQD3gtX3uuZvwYdeCvEG9F0K0TcwRshJvBKCAr8FaICf4QL74U8rAYdeBHCjmi6CJGBZyHwiKazEBt4EkKP6KnDu/cKHp3De4kZY4wxxhhjjDHGGGOMMcYYY4x99w+juSvDzdAgZgAAAABJRU5ErkJggg==") no-repeat center;
background-size: cover;
}
.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div id="comparison-carousel">
<div>
<div id="image-comparison">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e6a/e6a224ebbace87260f550a6a0e152f57_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/e75/e75686b6572485306bc0c16bd2b77a5c_cropped_525x700.webp" width="210" height="280" alt="Мэрилин Монро">
</div>
</div>
<div>
<div id="image-comparison2">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/ca7/ca71fad8869b1018ddf573a6a6438391_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/286/286895ba056ca1bbe8eaeb9151335235_cropped_525x700.webp" width="210" height="280" alt="Анджелина Джоли">
</div>
</div>
<div>
<div id="image-comparison3">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/70f/70f72068248b5a9cf4bfaffbd6c67214_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/8ae/8ae6352483b873219b4023a4aeede69f_cropped_525x700.webp" width="210" height="280" alt="Бейонсе">
</div>
</div>
<div>
<div id="image-comparison4">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/44b/44bd45b92bee48008cbe6c2aaf7ded2b_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
<img class="img-fluid" src="https://images.thevoicemag.ru/upload/img_cache/631/631d3a4c9e39d866437b0b931eab2fb1_cropped_525x700.webp" width="210" height="280" alt="Рене Зеллвегер">
</div>
</div>
</div>