Как исправить функционал ползунка для смены фото работу которого ломает подключение карусели?

Есть ползунок который позволяет скрывать-открывать изображения до-после.

Изначальное решение

Хочу сделать карусель из большего количества такого плана слайдов, но при подключении 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 шт):

Автор решения: Arbery

Это не связано с 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>

→ Ссылка