下面是在react中实现它的方式：

import Flickity from 'react-flickity-component'
 
const flickityOptions = {
    initialIndex: 2
}
 
function Carousel() {
  return (
    <Flickity
      className={'carousel'} // default ''
      elementType={'div'} // default 'div'
      options={flickityOptions} // takes flickity options {}
      disableImagesLoaded={false} // default false
      reloadOnUpdate // default false
      static // default false
    >
      <div class="gallery-cell"></div>
      <div class="gallery-cell"></div>
      <div class="gallery-cell"></div>
      <div class="gallery-cell"></div>
      <div class="gallery-cell"></div>
    </Flickity>
  )
}

不需要 Package 器，只需要将flickity作为依赖项安装，就可以动态导入，下面介绍如何在React或Next.js中使用Flickity：

export default function Carousel() {
  
  useEffect(() => {
    initFlickity();
  }, []);

  const carousel = useRef(null);

  async function initFlickity() {
    if (typeof window !== 'undefined' && carousel.current) {
      const Flickity = (await import('flickity')).default;
      new Flickity(carousel.current, {
        lazyLoad: true,
        wrapAround: true,
        autoPlay: true,
      });
    }
  }

  return (
    <div ref={carousel} className="w-full h-[600px] sm:w-[560px] sm:h-auto mx-auto relative">
      <div>
        <img src="/images/slide-1.jpg" />
      </div>
      <div>
        <img src="/images/slide-2.jpg" />
      </div>
    </div>
  );
}

Make sure you set dimensions for your containing element.