interactive-slider/src/index.html

<!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>
    <link rel="stylesheet" href="../../icon-fa/all.min.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="left slider">
      <div class="item" style="background-color: #ff6b81">春野樱</div>
      <div class="item" style="background-color: #ff7f50">晚霞</div>
      <div class="item" style="background-color: #191d1e">Lighter</div>
      <div class="item" style="background-color: #22292c">Dog</div>
    </div>
    <div class="right slider">
      <div
        class="item"
        style="background-image: url(../../public/image/1-1338-753.png)"
      ></div>
      <div
        class="item"
        style="background-image: url(../../public/image/2-1338-752.jpg)"
      ></div>
      <div
        class="item"
        style="background-image: url(../../public/image/3-1364-909.jpg)"
      ></div>
      <div
        class="item"
        style="
          background-image: url(../../public/image/photo-1507146426996-ef05306b995a.avif);
        "
      ></div>
    </div>

    <div class="btn up"><i class="fa-solid fa-angle-up"></i></div>
    <div class="btn down"><i class="fa-solid fa-angle-down"></i></div>

    <script src="index.js"></script>
  </body>
</html>