Как сделать слайдер адаптивным

Question

подскажите пожалуйста как можно адаптировать слайдер типа "Стало-было". На данный момент корректно отображается только на ширине 1200px.Буду рад любому решению!

let $whatisPointer = $('.js-pointer');
let $whatisSlide = $('.js-slide');
let $whatisZone = $('.js-zone');
let whatisMouseEvent = false;

//
// Обработка событий мыши на индикаторе стрелок
//

// Начало события изменения размера половинки слайда
$whatisPointer.mousedown((e) => {
  e.preventDefault();
  whatisMouseEvent = true;
});

// Завершение события изменения размера половинки слайда
$whatisPointer.mouseup((e) => {
  e.preventDefault();
  whatisMouseEvent = false;
});

//
// Обработка событий мыши на области слайда
//

// Завершение события изменения размера половинки слайда
$whatisZone.mouseup(() => {
  whatisMouseEvent = false;
});

// Завершение события изменения размера половинки слайда
$whatisZone.mouseleave(() => {
  whatisMouseEvent = false;
});

// Отслеживаем движения мыши в области слайдера
$whatisZone.bind('mousemove', (e) => {
  let x = e.pageX - $whatisZone.offset().left;
  let percent = x * 100 / $whatisZone.width();

  // Ограничения
  if (percent < 0) {
    percent = 0;
  } else if (percent > 100) {
    percent = 100;
  }

    if (whatisMouseEvent) {
    $whatisSlide.css('max-width', percent + '%');
  }
});

 html, body {
  background: #000;
}
.slider {
    position: absolute;
    top:0;
    left:0;
  width: 100%;
  height: 700px;
  background-image:url(https://s3.timeweb.com/cv08300-craftum/images/61744/faf4259eba9338505c8264583d0f15ae.webp);
  margin: 0 auto;
  
}
.slider__dynamic {
  width: 100%;
  max-width: 50%;
  height: 700px;
  background-image:url(https://274418.selcdn.ru/cv08300-33250f0d-0664-43fc-9dbf-9d89738d114e/images/61744/22a02f82366c9c3d7a423409179afdb5.webp);
  position: relative;
 
}
.slider__arrow {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  background: rgb(255, 255, 255);
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>


<body>
    <div class="cont">
    <div class='slider js-zone'>
        <div class='slider__dynamic js-slide'>
            <span class='slider__arrow js-pointer'></span>
        </div>
      </div>
</div>

БЛОГ НА HUSL

Как сделать слайдер адаптивным

Ответы (0 шт):