HTML 无限侧滚动图像意外移动

Question

我目前正在这个 HTML 网站上工作，其中有一个包含图像的容器，这些图像应该无限水平滚动，但根据我的逻辑，它们移动得比预期的远一点或少一点。 HTML :

<div class="projectContainer">
        <div id="project8" class="project">
          <p class="img">Project Description</p>
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
          <img alt="Projektbild" src="ImageDirectory" class="img">
        </div>
        <img src="img/left.png" id="left" onclick="moveProject('right', document.getElementById('project8'))">
        <img src="img/right.png" id="right" onclick="moveProject('left', document.getElementById('project8'))">
      </div>

CSS：

.projectContainer {
    position: relative;
    margin-top: 20vh;
    white-space: nowrap;
    height: 70vh;
    left: -50vw;
}

.project {
    position: relative;
    height: 70vh;
}

.img{
    display: inline-block;
    position: absolute;
    height: 70vh;
    width: 47vw;
    object-fit: cover;
    margin-left: 2vw;
    white-space: normal;
    transition: left 0.5s;
}

#left {
    left: 55vw;
}

#right {
    left: 145vw;
}

#right, #left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 3vh;
    width: 3vh;
    cursor: pointer;
    z-index: 5;
}

JS：

var allowNewMovement = true;

function moveProject(direction, parent) {
    if (allowNewMovement) {
        var leftPositions = [];
        let i = 0;

        // Speichere die initialen Positionen
        for (const child of parent.children) {
            leftPositions.push(child.offsetLeft);
        }

        if (direction == 'left') {
            for (const child of parent.children) {
                if (i >= 1) {
                    child.style.left = leftPositions[i - 1] + "px";
                } else {
                    child.style.left = leftPositions[leftPositions.length - 1] + "px";
                }
                if (child.offsetLeft == 0) {
                    child.style.opacity = "0";
                    setTimeout(() => {child.style.opacity = "1"}, 600);
                }
                i++;
            }
        } else {
            for (const child of parent.children) {
                if (i < leftPositions.length - 1) {
                    child.style.left = leftPositions[i + 1] + "px";
                } else {
                    child.style.left = leftPositions[0] + "px";
                }
                if (child.offsetLeft == Math.max(Math.max(...leftPositions.filter(pos => typeof pos === 'number')))) {
                    child.style.opacity = "0";
                    setTimeout(() => {child.style.opacity = "1"},600);
                }
                i++;
            }
        }
        allowNewMovement = false;
        setTimeout(() => {allowNewMovement = true}, 500)
    }
}

这显然不是完整的代码，但如果您需要更多代码来获得答案，请与我联系。

我已经试图弄清楚差异有多大，但它是相对于视口大小的，而图像是相对于视口大小的，这把一切都搞砸了（我认为）。 感谢您的回答！

Answer 1

修复方法如下：

document.addEventListener('DOMContentLoaded', function() {
  // Initialize Slick Carousel when DOM is ready
  $('#project8 .carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    prevArrow: '<img src="https://i.sstatic.net/JpbbB6V2.png" id="left">',
    nextArrow: '<img src="https://i.sstatic.net/6HqVMRmB.png" id="right">',
    responsive: [{
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });
});

#right,
#left {
  z-index: 99;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: #fff;
  border-radius: 20px;
  padding: 10px;
}

#right {
  right: 0px;
}

#left {
  left: 0px;
}

<!-- JQuery: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Slick Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<div class="projectContainer">
  <div id="project8" class="project">
    <div class="carousel">
      <div><img alt="Projektbild" src="https://picsum.photos/200/300" class="img"></div>
      <div><img alt="Projektbild" src="https://picsum.photos/200/300" class="img"></div>
      <div><img alt="Projektbild" src="https://picsum.photos/200/300" class="img"></div>
      <!-- Add more carousel items as needed -->
    </div>
  </div>
</div>

<!-- Slick Carousel JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

为此，我使用了Slick。您可以取出包含的

div

，然后图像将全屏显示。