<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

    <section class="slide">
        <div class="images">
        </div>
        <button id="previous" disabled><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                fill="currentColor">
                <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z"
                    clip-rule="evenodd" />
            </svg></button>
        <button id="next"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                fill="currentColor">
                <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z"
                    clip-rule="evenodd" />
            </svg></button>
    </section>




    <script src="app.js"></script>
</body>

</html>
// CSS Rest

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  width: 100%;
}

/* —————————————————————————————————— */

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.images {
  position: relative;
  width: 80%;
  height: 30rem;
  display: flex;
  overflow: hidden;
}

.images img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transition: transform ease 500ms;
  pointer-events: none;
  user-select: none;
}

button {
  background: none;
  border: none;
}

#previous {
  width: 3rem;
  position: absolute;
  top: 52%;
  left: 12%;
  transform: translate(0, -50%);
  color: white;
  transition: color 300ms;
}

#next {
  width: 3rem;
  position: absolute;
  top: 52%;
  right: 12%;
  transform: translate(0, -50%);
  color: white;
  transition: color 300ms;
}

#previous:hover:enabled,
#next:hover:enabled {
  cursor: pointer;
  color: pink;
}

#previous:disabled,
#next:disabled {
  cursor: default;
  opacity: 0.5;
}

const imageBank = {
  data: {
    children: [
      {
        data: {
          url_overridden_by_dest:
            "https://expoupdate.se/wp-content/uploads/2021/09/Universal-Childrens-Day.jpg",
        },
      },
      {
        data: {
          url_overridden_by_dest:
            "https://www.un.org/sites/un2.un.org/files/field/image/un0381303.jpg",
        },
      },
      {
        data: {
          url_overridden_by_dest:
            "https://www.openaccessgovernment.org/wp-content/uploads/2021/08/dreamstime_l_8010134-scaled.jpg",
        },
      },
      {
        data: {
          url_overridden_by_dest:
            "https://www.unicef.org/philippines/sites/unicef.org.philippines/files/styles/hero_desktop/public/JMY_4656.jpg?itok=MPSdnDzH",
        },
      },
    ],
  },
};
const slide = document.querySelector(".slide");
const imageSlide = document.querySelector(".images");
for (let i = 0; i < imageBank.data.children.length; i++) {
  const img = document.createElement("img");
  img.src = imageBank.data.children[i].data.url_overridden_by_dest;
  imageSlide.append(img);
}
const allImages = document.querySelectorAll(".images img");
allImages.forEach((image) => {
  image.style.transform = "translate(0%)";
});
let currentDisplay = allImages[0];
const previousButton = document.querySelector("#previous");
const nextButton = document.querySelector("#next");
let timer;

function autoScroll() {
  timer = setInterval(() => {
    if (currentDisplay.nextElementSibling !== null) {
      allImages.forEach((image) => {
        image.style.transform = `translate(-${
          parseInt(image.style.transform.match(/\d+/)[0]) + 100
        }%)`;
      });
      currentDisplay = currentDisplay.nextElementSibling;
      if (currentDisplay.previousElementSibling !== null) {
        previousButton.disabled = false;
      }
      if (currentDisplay.nextElementSibling === null) {
        nextButton.disabled = true;
      }
    } else {
      allImages.forEach((image) => {
        image.style.transform = "translate(0%)";
      });
      previousButton.disabled = true;
      nextButton.disabled = false;
      currentDisplay = allImages[0];
    }
  }, 2500);
}

nextButton.addEventListener("click", function () {
  previousButton.disabled = false;
  allImages.forEach((image) => {
    image.style.transform = `translate(-${
      parseInt(image.style.transform.match(/\d+/)[0]) + 100
    }%)`;
  });
  currentDisplay = currentDisplay.nextElementSibling;
  if (currentDisplay.nextElementSibling === null) {
    this.disabled = true;
  }
});

previousButton.addEventListener("click", function () {
  nextButton.disabled = false;
  allImages.forEach((image) => {
    image.style.transform = `translate(-${
      parseInt(image.style.transform.match(/\d+/)[0]) - 100
    }%)`;
  });
  currentDisplay = currentDisplay.previousElementSibling;
  if (currentDisplay.previousElementSibling === null) {
    previousButton.disabled = true;
  }
});

slide.addEventListener("mouseover", function () {
  clearInterval(timer);
});

slide.addEventListener("mouseleave", autoScroll);

autoScroll();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.