Horizontal Scroll

import HorizontalScroll from './index.jsx';
import styles from './demo.module.css';

const SLIDES = [
  { src: '/demo-assets/models/model0.png', alt: '', title: 'Editorial' },
  { src: '/demo-assets/models/model3.png', alt: '', title: 'Campaign' },
  { src: '/demo-assets/models/model6.png', alt: '', title: 'Portrait' },
  { src: '/demo-assets/models/model1.png', alt: '', title: 'Studio' },
  { src: '/demo-assets/models/model5.png', alt: '', title: 'Archive' },
];

export default function HorizontalScrollDemo() {
  return (
    <div className={styles.demo}>
      <section className={styles.intro}>
        <p className={styles.label}>Horizontal Scroll</p>
        <h1 className={styles.heading}>Scroll down<br />to move through</h1>
      </section>
      <HorizontalScroll slides={SLIDES} />
      <section className={styles.outro}>
        <p className={styles.outroText}>End of demo</p>
      </section>
    </div>
  );
}