How can I reverse an infinite images carousel using JS?-CodePudding

I found on a codepen this code and used it for my project. Im trying to make 1 more line under and change the direction from right to left, how can I do it?

let xOffset = 0;
let isMouseIn = false;
const slides = document.getElementById("slides");

setInterval(translate, 0);

function translate() {
  let offsetIncrementor = isMouseIn ? 0.05 : 0.2;
  if (xOffset >= 258 * 7) xOffset = 0;
  else xOffset = xOffset   offsetIncrementor;
  slides.style.transform = "translateX(-"   xOffset   "px)";
}

slides.addEventListener("mouseover", function (event) {
  isMouseIn = true;
});

slides.addEventListener("mouseout", function (event) {
  isMouseIn = false;
});

CodePudding user response：

Change the flex direction (currently defaults to row because it's not declared) to flex-direction: row-reverse and remove the negative translate from the JS slides.style.transform = "translateX(-" xOffset "px)"; to -> slides.style.transform = "translateX(" xOffset "px)";

let xOffset = 0;
let isMouseIn = false;
const slides = document.getElementById("slides");

setInterval(translate, 0);

function translate() {
  let offsetIncrementor = isMouseIn ? 0.05 : 0.2;
  if (xOffset >= 258 * 7) xOffset = 0;
  else xOffset = xOffset   offsetIncrementor;
  slides.style.transform = "translateX("   xOffset   "px)";
}

slides.addEventListener("mouseover", function(event) {
  isMouseIn = true;
});

slides.addEventListener("mouseout", function(event) {
  isMouseIn = false;
});

.slide-content {
  margin: 8px;
  width: 250px;
  height: 140px;
  background-color: lightgray;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

img {
  width: 100%;
}

.slid-er {
  height: 156px;
  /* slide-content height   2*margin */
  margin: auto;
  overflow: hidden;
  width: 100%;
}

.slid-er .slides {
  display: flex;
  flex-direction: row-reverse;
}

.slid-er .slide {
  width: 258px;
  /* slide-content width   margin */
}

.button-container {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: opacity 0.25s;
}

.button-container:hover {
  opacity: 1;
}

.button-container:hover .button {
  transform: translate(-50%, -50%);
}

.button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50%   12px));
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.25s;
  padding: 0 8px;
  border-radius: 12px;
  color: white;
  outline: 2px solid transparent;
}

.button:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs 9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
  filter: invert(1);
}

.button:hover {
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 0 2px gray;
}

<h2 >Movie stills</h2>
<div >
  <div >
    <div  id="slides">
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/42502790224869685/" target="_blank">
            <img src="https://i.pinimg.com/originals/e2/16/b0/e216b0f9c1cda3f4b5cdf44fee26060d.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/15833036179887216/" target="_blank">
            <img src="https://i.pinimg.com/originals/fd/d7/cc/fdd7ccccc4b74cea4f15ba1702ef8813.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/125045327144436605/" target="_blank">
            <img src="https://i.pinimg.com/originals/fb/4a/d5/fb4ad589b0cefbc990524e03e7e39eef.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/413909022012674906/?mt=login" target="_blank">
            <img src="https://i.pinimg.com/originals/84/2e/46/842e46400117c1c04a19591d28fd8c18.png" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/amelie-poulain-audrey-tautou--407857309977538667/" target="_blank">
            <img src="https://i.pinimg.com/236x/46/a6/3e/46a63ed5171192f262780b550ca1ca62--chez-elle-audrey-tautou.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/703617141757346153/?mt=login" target="_blank">
            <img src="https://i.pinimg.com/236x/5f/b4/d0/5fb4d05431e64e17fa8d7ae3040657f3.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/307933693249401885/" target="_blank">
            <img src="https://i.pinimg.com/originals/cc/c7/3d/ccc73d8fba861806354424eab2e620cc.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <!-- Mirror content -->
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/42502790224869685/" target="_blank">
            <img src="https://i.pinimg.com/originals/e2/16/b0/e216b0f9c1cda3f4b5cdf44fee26060d.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/15833036179887216/" target="_blank">
            <img src="https://i.pinimg.com/originals/fd/d7/cc/fdd7ccccc4b74cea4f15ba1702ef8813.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/125045327144436605/" target="_blank">
            <img src="https://i.pinimg.com/originals/fb/4a/d5/fb4ad589b0cefbc990524e03e7e39eef.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/413909022012674906/?mt=login" target="_blank">
            <img src="https://i.pinimg.com/originals/84/2e/46/842e46400117c1c04a19591d28fd8c18.png" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/amelie-poulain-audrey-tautou--407857309977538667/" target="_blank">
            <img src="https://i.pinimg.com/236x/46/a6/3e/46a63ed5171192f262780b550ca1ca62--chez-elle-audrey-tautou.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/703617141757346153/?mt=login" target="_blank">
            <img src="https://i.pinimg.com/236x/5f/b4/d0/5fb4d05431e64e17fa8d7ae3040657f3.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
      <div >
        <div >
          <a href="https://www.pinterest.com/pin/307933693249401885/" target="_blank">
            <img src="https://i.pinimg.com/originals/cc/c7/3d/ccc73d8fba861806354424eab2e620cc.jpg" loading="lazy" />
            <div >
              <span >Download</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>