между первым и последним изображениями в карусели появляется "пробел"

Question

const sliders = document.querySelectorAll('.box');

sliders.forEach((slider) => {
  let isDown = false;
  let startX;
  let scrollLeft;
  let startScroll;

  slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    startScroll = slider.scrollLeft;
  });

  slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
  });

  slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
  });

  slider.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX);
    slider.scrollLeft = startScroll - walk;
    if (slider.scrollLeft <= 0) {
      slider.scrollLeft = slider.scrollWidth;
    } else if (slider.scrollLeft >= slider.scrollWidth - slider.clientWidth) {
      slider.scrollLeft = 0;
    }
  });

  const firstChild = slider.firstElementChild;
  const lastChild = slider.lastElementChild;
  const cloneFirst = firstChild.cloneNode(true);
  const cloneLast = lastChild.cloneNode(true);

  slider.appendChild(cloneFirst);
  slider.insertBefore(cloneLast, firstChild);
});

@import url('https://fonts.googleapis.com/css2?family=Vina+Sans&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body { 
    background: linear-gradient(to bottom right, #000000, #ADFF2F, #7FFF00);
    border: 3px solid black;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo {
    font-family: Vina Sans;
    font-style: italic;
    font-size: 400%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.box {
    overflow: hidden;    
    display: flex;
    margin-top: 3px;
    margin-bottom: 0px;
    white-space: nowrap;
}

.img1 {
    display: inline-block;
    animation: 20s slide2 infinite linear;
}

.img2 {
    display: inline-block;
    animation: 20s slide infinite linear;  
}

.img1 img {
    width: 400px;
    height: 254px;
    border: 1px solid black;
    margin-right: 1px;
}

.img2 img {
    width: 400px;
    height: 250px;
    border: 1px solid black;
    margin-right: 1px;
}


@keyframes slide {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-100%);
}
}

@keyframes slide2 {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/ui-lightness/jquery-ui.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="img1">
            <img src="dead-cells.jpg" alt="dead cells">
            <img src="chrono.jpg" alt="Chrono">
            <img src="Collei.jpg" alt="Collei">
            <img src="Jolyne Cujoh.jpg" alt="">
            <img src="kakein.jpg" alt="">
            <img src="mobius.jpg" alt="">
        </div>
        </div>
        <div class="logo">
            <h1 class="logo1">Shockwawe</h1>
        </div>
        <div class="box">
            <div class="img2">
            <img src="valorant.jpg" alt="Viper">
            <img src="genji.jpg" alt="Genji">
            <img src="cyberpunk.jpg" alt="Edgerunners">
            <img src="prompt2.jpg" alt="">
            <img src="spawn.jpg" alt="">
            <img src="zennyata.jpg" alt="">
        </div>
        </div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.2/jquery-ui.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

https://imgur.com/5ZZkPJt

Answer 1

Смею предположить, что вопрос задан не совсем корректно, ибо я вижу отсутствие пробела между последним и первым изображением

В таком случае, чтобы не переписывать на flex'ы, в style.css можно добавить перед @keyframes

.img1 img:first-child,
.img2 img:first-child {
  margin-left: 4px;
}

БЛОГ НА HUSL

между первым и последним изображениями в карусели появляется "пробел"

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