This js code is the scrollable container using JS DOM

scrollable-container.js

const container = document.getElementById("scrollable-container");
      const categories = [
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/best-sellers.png",
          title: "Best Sellers",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/new.png",
          title: "New",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/necklaces.png",
          title: "Necklaces",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/rings.png",
          title: "Rings",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/bracelets.png",
          title: "Earrings",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/personalized.png",
          title: "Personalized",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/fine.png",
          title: "Fine",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/clearance.png",
          title: "Clearance",
          link: "/products.html",
        },
        {
          imgSrc:
            "https://storage.googleapis.com/abtest-img-bucket/jmp-9.2-sub-category-images/jm-fine-sample.png",
          title: "Sale",
          link: "/products.html",
        },
      ];

      // function that create product card
      function createScrollableCard(imgLink, title, link) {
        const card = document.createElement("div");
        card.className = "scrollable-card";

        const anchor = document.createElement("a");
        anchor.href = link;

        const img = document.createElement("img");
        img.src = imgLink;
        anchor.appendChild(img);

        const titleTag = document.createElement("p");
        titleTag.textContent = title;
        anchor.appendChild(titleTag);

        card.appendChild(anchor);
        return card;
      }

      categories.forEach((category) => {
        const card = createScrollableCard(
          category.imgSrc,
          category.title,
          category.link
        );
        container.appendChild(card);
      });