Image Gallery

Image gallary displays images in sequence.

INFO

Note: Use Tailwind CSS to view Gallary properly.

Import $render utilities

import { $render, stringify } from "@codingnninja/koras";

Gallery component

const Gallary = () => {
  const images = [
    {
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg",
      alt: "",
    },
    {
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg",
      alt: "",
    },
    {
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg",
      alt: "",
    },
  ];

  return `
      <div 
        class="grid gap-4"
        id="gallary">
        <CurrentImage image=${images[0]} />
        <Pagination images=${images}/>
      </div>
    `;
};

Pagination component

const Pagination = (images) => {
  return `
      <div 
        class="grid grid-cols-5 gap-4"
        id="pagination">
        ${images.map((image, key) => {
          return `
          <div id="${key}">
            <img
              onClick="$render(CurrentImage, ${image})"
              class="h-auto max-w-full rounded-lg" 
              src=${image.src}
            />
          </div>
        `;
        })}
      </div>
    `;
};

CurrentImage component

const CurrentImage = ({ src, alt }) => {
  return `
      <div id="current-image">
        <img class="h-auto max-w-full rounded-lg" src="${src}" alt="${alt}">
      </div>
    `;
};

Render Gallery

$render(Gallery);

• Playground