Не получается сделать слайдер

Question

Не получается сделать слайдер

Рейтинг: 0Ответов: 0Опубликовано: 21.04.2023

Всем привет. У меня возникла проблема с сдвигающим слайдером. Я его сделал, но изображения стоят как то криво. Я хочу сделать как на этом сайте:https://aaa-sitrak.ru/trade-in Буду рад любой помощи!

  $("#slider").on("input change", (e)=>{
    const sliderPos = e.target.value;
    // Update the width of the foreground image
    $('.foreground-img').css('width', `${sliderPos}%`)
    // Update the position of the slider button
    $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`)
  });

html {
         box-sizing: border-box;
     }
     
     *, *:before, *:after {
         box-sizing: inherit;
     }
     
     body {
         margin: 0;
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
     }
     
     .container {
         position: relative;
         width: 900px;
         height: 600px;
         border: 2px solid white;
         overflow: hidden;
     }
     
     .container .img {
         position: absolute;
        
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-size: 500px 100%;
     }
     
     .container .background-img {
        background-size: cover;
      height: 100%;
        background-image: url("https://s3.timeweb.com/cv08300-craftum/images/61744/faf4259eba9338505c8264583d0f15ae.webp");
     }
     
     .container .foreground-img {
         background-image: url("https://274418.selcdn.ru/cv08300-33250f0d-0664-43fc-9dbf-9d89738d114e/images/61744/22a02f82366c9c3d7a423409179afdb5.webp");
         width: 50%;
         background-repeat: no-repeat;
         background-size: cover;
         object-fit: cover;
     }
     
     .container .slider {
         position: absolute;
         -webkit-appearance: none;
         appearance: none;
         width: 100%;
         height: 100%;
         background: rgba(242, 242, 242, 0.3);
         outline: none;
         margin: 0;
         transition: all 0.2s;
         display: flex;
         justify-content: center;
         align-items: center;
     }
     
     .container .slider:hover {
         background: rgba(242, 242, 242, 0.1);
     }
     
     .container .slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
         width: 6px;
         height: 600px;
         background: white;
         cursor: pointer;
     }
     
     .container .slider::-moz-range-thumb {
         width: 6px;
         height: 600px;
         background: white;
         cursor: pointer;
     }
     
     .container .slider-button {
         pointer-events: none;
         position: absolute;
         width: 30px;
         height: 30px;
         border-radius: 50%;
         background-color: white;
         left: calc(51% - 18px);
         top: calc(50% - 18px);
         display: flex;
         justify-content: center;
         align-items: center;
     }
     
     .container .slider-button:after {
         content: '';
         padding: 3px;
         display: inline-block;
         border: solid #5D5D5D;
         border-width: 0 2px 2px 0;
         transform: rotate(-45deg);
     }
     
     .container .slider-button:before {
         content: '';
         padding: 3px;
         display: inline-block;
         border: solid #5D5D5D;
         border-width: 0 2px 2px 0;
         transform: rotate(135deg);
     }

<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='container'>
      <div class='img background-img'>
       
      </div>
      <div class='img foreground-img'>
       
      </div>
      <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
      <div class='slider-button'></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <script src="./script.js"></script>
  </body>
  </html>

css javascript

Источник: Stack Overflow на русском

Не получается сделать слайдер

Ответы