tailwindcssで画像無限スクロールの作り方

'use client'

import { useRef, useCallback } from 'react'
import Image from '@/components/Image'

const images = [
  { src: '/images/back1.jpg', alt: '' },
  { src: '/images/back2.jpg', alt: '' },
  { src: '/images/back3.jpg', alt: '' },
  { src: '/images/back4.jpg', alt: '' },
  { src: '/images/back5.jpg', alt: '' },
  { src: '/images/back6.jpg', alt: '' },
  { src: '/images/back7.jpg', alt: '' },
  { src: '/images/back8.jpg', alt: '' },
]

const ImageScrolle = () => {
  const renderImage = useCallback((image: { src: string; alt: string }) => {
    return (
      <Image
        src={image.src}
        alt={image.alt}
        width={500}
        height={325}
        className="w-[300px] max-w-none rounded-lg md:w-[400px]"
      />
    )
  }, [])

  return (
    <div className="inline-flex w-full flex-nowrap overflow-hidden">
      <ul className="animate-infinite-scroll flex items-center justify-center md:justify-start">
        {images.map((image, i) => (
          <li key={i} className="mx-2">
            {renderImage(image)}
          </li>
        ))}
      </ul>
      <ul
        className="animate-infinite-scroll flex items-center justify-center md:justify-start"
        aria-hidden="true"
      >
        {images.map((image, i) => (
          <li key={i} className="mx-2">
            {renderImage(image)}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default ImageScrolle

import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      animation: {
        'infinite-scroll': 'infinite-scroll 100s linear infinite',
      },
      keyframes: {
        'infinite-scroll': {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(-100%)' },
        },
      }
    }
  }
}